CSS Grid实现内容展开收起

CSS Grid实现内容展开收起

<button id="toggle">toggle</button>

<div>Something before</div>

<div class="expander" id="expander">
  <div class="expander-content">
    toggle! 
  </div>
</div>

<div>Something after</div>

.expander {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 1s;
}
.expander-content {
  min-height: 0;
  transition: visibility 1s;
  visibility: hidden;
}
.expander.expanded {
  grid-template-rows: 1fr;
}
.expander.expanded .expander-content {
  visibility: visible;
}

toggle.onclick = () => {
  expander.classList.toggle("expanded");
};