JavaScript+CSSのアコーディオンメニュー

slide toggle

Hello world!

<dl>
  <dt>slide toggle</dt>
  <dd>Hello world!</dd>
</dl>

dt, dd {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #000;
}
dt {
  border-bottom: none;
}
dd {
  overflow: hidden;
  margin: 0;
  transition: 0.3s all;
}
dd:not(.open) {
  height: 0;
  padding: 0 10px;
}

var dt = document.querySelector('dt')
var dd = document.querySelector('dd')
dt.addEventListener('click', () => {
  dd.classList.toggle('open')
})

元記事を表示する