アコーディオンメニューの実装

こちらの練習サイト内のページで実装してみました。

完成形：https://skblogwp.com/practice/javascript/article_002/

HTML

dtは用語、ddはその用語に対する説明をあらわします。

<dl class="test_content">
  <dt>
    <p>システムが実現すべき応答時間などのシステムの品質を明確にする工程として、適切なものはどれか。
      <br>選択肢：<br>
          ア.　システムテスト<br>
          イ.　システム要件定義<br>
          ウ.　ソフトウェア詳細設計<br>
          エ.　プログラミング
    </p>
    <a class="btn"><span></span></a>
  </dt>
  <dd>
    <p>イ</p>
  </dd>                                                   
</dl>

CSS

.test_content dt{
    background-color: #0068b7;
    color: #fff;
    display: flex;
    align-items: center;  /*この指定があることで、右隣の＋マークが縦の中央に配置される。*/
    justify-content: space-between;  /*左右に配置*/
    cursor: pointer;  /*カーソルがアイコンに変わり、クリックできるようにする。*/
    padding: 16px;
    max-width: 100%;
    margin:15px 0 15px;
}
.test_content dt p{
    width: 90%; /*右隣の＋マークを配置するスペースを確保するため。*/
}
.test_content dt .btn{
    height: 16px;
    width: 16px;
}
.test_content dt .btn span{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform .3s;
}
.test_content dt.open .btn span{
    transform: rotate(-45deg);  /*.open クラスが付与されたときに transform: rotate(-45deg) で、spanが45度回転して十字形から「×」の形に変化します。これで、アコーディオンが展開された状態を視覚的に表現します。*/
}
.test_content dt .btn span::before{  /*疑似要素 ::before を使って、横棒の部分を形成しています。*/
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;  /*垂直方向に中央揃え*/
    left: 0;  
    transform: translateY(-50%);  /*垂直方向に中央揃え*/
    background-color: #fff;
}
.test_content dt .btn span::after{
    content: "";
    height: 100%;
    width: 2px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);  /*水平方向に中央揃え*/
    background-color: #fff;
}
.test_content dd{
    padding: 16px;
    display: none;  
}

jQuery

$(function () {

    //start
    var $q = $(".test_content dt");
    
    $q.on("click",function(){
        $this = $(this);
        $this.toggleClass("open");
        $this.next().slideToggle(300);  //クリックされた <dt> 要素の次の兄弟要素（ここでは <dd>）を取得し、この要素を300ミリ秒（0.3秒）でスライド表示（非表示の場合）またはスライド非表示（表示中の場合）に切り替えます。
    })
    //finish

});