html jQuery的でアコーディオンパネル

Posted 2021-05-11

//javascript
$(function() {
  $('#accordion dd').hide();
  $('#accordion dt a').click(function(){
    $('#accordion dd').slideUp();
    $(this).parent().next().slideDown();
    return false;
  });
});

//css
#accordion {
  border: 1px #ccc solid;
  border-top: none;
  width:500px;
}
#accordion dt {
  background: #ddd;
  padding: 10px;
  border-top: 1px #ccc solid;
}
#accordion dt a {
  color: #000;
  text-decoration: none;
  display:block;
}
#accordion dd {
  padding: 10px;
}

//html
<dl id="accordion">
  <dt><a href="#">menu01</a></dt>
  <dd><a href="#">sub menu01</a>｜<a href="#">sub menu02</a>｜<a href="#">sub menu031</a></dd>
  <dt><a href="#">menu02</a></dt>
  <dd>コンテンツが表示されます。コンテンツが表示されます。コンテンツが表示されます。コンテンツが表示されます。</dd>
  <dt><a href="#">menu03</a></dt>
  <dd>コンテンツが表示されます。コンテンツが表示されます。</dd>
</dl>