かんろぐ Written by kan

【jQuery/css】シンプルなアコーディオンメニュー【コピペOK】

CODE JavaScript

PR ※当サイトではアフィリエイト広告を利用しています


「シンプルなアコーディオンメニューを作りたい。なるべく手軽でサクッと作れてコピペでできると嬉しいな。」

今回はすごくシンプルな形のアコーディオンをjQueryで表示させる方法を紹介します。

完成系はこちら


コピペでサクッと使えるのでぜひ使ってみてください\(^^)/

【jQuery/css】シンプルなアコーディオンメニュー【コピペOK】

それぞれコードの紹介をしていきます。

HTML


 <div class="accordion-box">
  <dl class="accordion-item">
   <dt class="accordion-title js-accordion-title">ここにタイトルが入る</dt>
    <dd class="accordion-lead">
     <p>ここにテキストが入る</p>
    </dd>
   </dl>
  </div>

CSS


.accordion-box {
    width: 100%;
}
.accordion-item{
    border-bottom: 1px solid #333;
}

.accordion-title {
    cursor: pointer;
    font-size: 16px;
    padding: 20px 40px;
    position: relative;
}

.accordion-title:after {
    position: absolute;
    display: block;
    content: '';
    top: 30%;
    left: 16px;
    width: 8px;
    height: 8px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #333;
    transform: rotate(0deg);
    transition: all .3s ease-in-out;
}

.accordion-title.open:after {
    transform: rotate(90deg);
    top: 30%;
}

.accordion-lead {
    border-bottom: 1px solid #DDD;
    display: none;
    padding: 20px 40px;
}

CSSはJavaScriptで生成しているクラスをあらかじめ追記しておき、スタイルを整えています。

また、矢印は自作しており画像をダウンロードする必要がありません。地味に面倒ですからね、、。

JavaScript


  //アコーディオン
  $(function () {
    $(".js-accordion-title").on("click", function() {
      $(this).next().slideToggle(300);
      $(this).toggleClass("open",300);
    });
  });

クリックした時に「js-accordion-title」が発火するようにしております。

以上になります。

参考になったらぜひリツイートしてくれると嬉しいです。
リツイートする

他にも記事を見てみる

この記事を書いた人
かんろぐ/プロフィールアイコン
かん
未経験からWeb制作会社へ転職 | Webの楽しさや転職のあれこれを発信 | 転職サポート「CodeChange」主催 / 転職成功15名超 | WordPress・Shopify | CodeBegin転職講師 | マナブさん弟子 | カオマンガイとサウナ | ブロガー | ●かんろぐ運営/月間7,600PV達成 |

合わせて読みたい記事