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

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

まず Javascript なしで。

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

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

form のinput と label を使用したアコーディオン。
CSSのみなので、開いた後に「閉じる」と文字を変えるのが少し面倒です。矢印の上下をデザインに入れることで、開閉を表現しているところがボタンとわかるポイントですね。

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

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

▼ このあたりは疑似要素で線の矢印(chevron arrow)を書いています
 &::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 を使うのもありです。

▼このあたりは三角矢印(triangle arrow)の記述です。
.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;
}
Javascript は普段ほしい機能を調べては実装してるだけなので、もっとレベルアップしたいですね。
もっとレベルアップしたら参考にしたい!動きもJSで制御する方法:素のJavaScriptでアコーディオンメニューを作る(クリックで開閉・jQueryなし)

コメント

  1. online order enclomiphene singapore where to buy

    order enclomiphene cheap fast shipping

  2. acheter kamagra bonne

    achat kamagra en usa

  3. buy androxal australia suppliers

    order androxal generic uk

  4. cheap dutasteride cost without insurance

    how to buy dutasteride generic india

  5. buy cheap flexeril cyclobenzaprine cheap in canada

    cheap flexeril cyclobenzaprine australia purchase

  6. get gabapentin mastercard buy

    how to get a gabapentin prescription

  7. fildena next day cod fedex

    online order fildena generic available in united states

  8. get itraconazole buy japan

    generic itraconazole singapore

  9. buy cheap staxyn american express canada

    cheap staxyn generic online usa

  10. cheap avodart buy dallas

    order avodart generic work

  11. cheap xifaxan uk order

    xifaxan no prescription next day delivery

  12. how to buy rifaximin usa pharmacy

    how to buy rifaximin generic discount

  13. koupit kamagra bez lékařského předpisu online

    nakupte kamagra online

タイトルとURLをコピーしました