開閉できる目次のアコーディオン

開閉できる目次（アコーディオン）のコーディングを試して見ました。

まず Javascript なしで。

「目次」というところをクリックするとリストが出てきます。

See the Pen
目次_CSS by usazawa (@usazawa)
on CodePen.

途中まで考えてわからないところがあったので参考を見ました。自作だとゆっくり開かないところが気になっていたのですが、:checkdの transition を効かせる部分に height はもちろん、 margin もチェックした後につけてるところがぬるっと開いてるように見える要所なのかなと。あとは、transform: translateZ(0); とbackface-visibility: hidden; でパット見は平面ですが、3Dにしているあたりがポイントなのかな？と思います。

3Dにする translateZ(0) などは、入れたといたほうが挙動が安定するのかな？？

 &::before {
content: '';
position: absolute;
display: block;
width: 10px;
height: 10px;
margin-top: -2px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
top: 50%;
right: 14px;
transform: translateY(-50%) rotate(45deg);
transition: all .3s;
}

Javascriptで作ってみた場合

Javascript で、「開ける」「閉じる」文字の差し替えも兼ねてやってみます。

See the Pen
Untitled by usazawa (@usazawa)
on CodePen.

文字以外は簡単に、CSSで変化後のスタイルを準備しておいて、JSでクラスをつけ外すやり方です。

#btn に対して .classList.toggle を使っています。.classList.contains() で open クラスがついていたら’閉じる’、そうでなければ’開ける’と文字を書き換えています。

文字の書き換えに使っている textContent は、その中に子タグがあればそれも書き換えてしまうので、後々のために innerText を使うのもありです。

.tri {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
top: 50%;
transform: translateY(-50%);
right: 16px;
position: absolute;
transition: all 0.3s;
}