HTML - アコーディオン

 
1. アコーディオン
2. 記述
3. 実際に書いてみる

1. アコーディオン

 以前、トップのページをアコーディオン表示にしていたのですが、項目もそんなに多くないし、見栄えもあまりよくなかったので、やめました。  その後、必要に駆られて、またアコーディオン表示にしようと思ったらそのときの設定をすっかり忘れてしまいました。  そのときは、jQuery を使っていなかったのですが、jQuery を使えば、もっと簡単にできるらしいので、やってみます。  本項は、以下を参考にさせていただきました。
【jQuery】プラグインなしで簡単にアコーディオンを作る方法。

2. 記述

 まずは、参考サイトをまんまパクって書いてみます。  css の記述

.accordeyon > dl > dt {
    padding: 0px 10px;
}
.accordeyon > dl > dt, .accordeyon > dl > dd > ul > li, .accordeyon > ul > li {
    border-bottom: 1px solid #BDBDBD;
    height: 63px;
    line-height: 63px;
    position: relative;
}
.accordeyon > dl > dt:after {
    content: "+";
    position: absolute;
    right: 10px;
    top: 50%;
    line-height: initial;
    margin: -14px 0 0;
    font-size: 20px;
    font-weight: bold;
}
.accordeyon > dl > dt.dopen:after {
    content: "-";
}
.accordeyon > dl > dd {
    background-color: #424242;
    display: none;
}
.accordeyon > dl > dt, .accordeyon > dl > dd > ul > li, .accordeyon > ul > li {
    border-bottom: 1px solid #BDBDBD;
    height: 63px;
    line-height: 63px;
    position: relative;
}
.accordeyon >dl > dd > ul > li:after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -4px 0px 0px;
}
.accordeyon > dl > dd a, .accordeyon > ul > li a {
    display: block;
    padding: 0px 20px;
    box-sizing: border-box;
    color:#fff;
}
 JavaScript

$(function(){
$('.accordeyon > dl > dt').on('click',function(){
        var Dopenclass = $(this).attr('class');
        $(this).next('dd').slideToggle();
        if(!Dopenclass){
            $(this).addClass('dopen');
        }else{
            $(this).removeClass('dopen');
        }
    });
});
 HTML

<div class="accordeyon">
<dl>
<dt>メニュー</dt>
<dd>
<ul>
<li><a href="">詳細1</a></li>
<li><a href="">詳細2</a></li>
<li><a href="">詳細3</a></li>
</ul>
</dd>
</dl>
</div>

3. 実際に書いてみる

メニュー
 やっと動いたのですが、仕組みが分かっていないので、ここのサイト用にどうカスタマイズしていったらよいやら・・・。  今んとこ解析中です。