などの疑問や悩みを解決してまいります。
Q&Aや問題集などによく使用されるアコーディオン機能ですが、実装が難しいと思っていませんか。
しかし、コードを紐解いて確認してみると仕組みはシンプルです。
この記事では初心者や苦手意識がある方でも簡単に実装できる方法をわかりやすく解説します。
アコーディオンの完成例
以下完成例です。
See the Pen アコーディオン by koutarou mori (@koutarou-mori) on CodePen.
コードを見ていただくとわかるのですが、とても短いですよね。（CSSはデザイン部分なので個人差ありますが…）
この短いコードだけで簡単にアコーディオンを実装することが可能なのです。
なので初心者の方も苦手意識がある方も大丈夫ですのでそれぞれのコードを見て仕組みを理解していきましょう！
HTMLの解説
コードは以下のようになっています。
<body>
<div class="accordion">
<p class="accordionTitle">タイトルが入ります。</p>
<p class="accordionText">テキストが入ります。</p>
</div><!-- /.accordion -->
<div class="accordion">
<p class="accordionTitle">タイトルが入ります。</p>
<p class="accordionText">テキストが入ります。</p>
</div><!-- /.accordion -->
</body>まずアコーディオンは要素をクリックするとクリックした要素の下に、別の要素が表示されるという仕組みになっています。
なので上記コードではaccordionTitleクラスをクリックすると、accordionTextクラスが表示されるというようにしています。
ポイント
〇 クリック用の要素と、クリックしたら表示される用の要素の２つを用意する
CSSの解説
コードは以下のようになっています。
/* リセットCSS */
body {
box-sizing: border-box;
}
div,p {
box-sizing: border-box;
margin: 0;
}
/* アコーディオン全体 */
.accordion {
width: 100%;
max-width: 1000px;
margin: 20px auto 0;
border: 1px solid #303030;
}
/* title部分 */
.accordionTitle {
width: 100%;
background-color: #303030;
padding: 15px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
cursor: pointer;
}
/* text部分 */
.accordionText {
display: none;
width: 100%;
padding: 15px 20px;
font-size: 16px;
color: #303030;
background-color: #eee;
}CSSは必須なコードというものはないのですが、クリックできるということをユーザーに伝えるためにcursor: pointer;を指定しましょう。
JS（jQuery）の解説
コードは以下のようになっています。
$(function () {
$('.accordionTitle').on('click',function () {
$(this).next().slideToggle();
})
});JS（jQuery）のコードはこれだけです。
$('.accordionTitle').on('click',function () {は、accordionTitleクラスをクリックすると…の部分になります。
$(this).next().slideToggle();は、クリックした要素の次の要素をスライドで表示させるという意味があります。
ポイント
〇 $(○○).on('click',function () {は、○○をクリックすると…の部分
〇 $(this).next().slideToggle();は、該当要素の次の要素をスライドで表示させる部分
【オススメ】開閉の状態をわかりやすくしたアコーディオンの完成例
アコーディオンの開閉切り替えをさらにユーザーにわかりやすく伝えることで、UIを意識したより機能的なアコーディオンを作ることが可能です。
以下はアコーディオンが閉じているときは「+」、開いているときは「-」を要素の右側に表示しています。
See the Pen アコーディオン【+-仕様】 by koutarou mori (@koutarou-mori) on CodePen.
追加したコードをピックアップして解説していきます。
CSSの解説
CSSで追加したコードは以下です。
/* title部分 */
.accordionTitle {
position: relative; /* 追加 */
width: 100%;
background-color: #303030;
padding: 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
cursor: pointer;
}
/* 追加 */
.accordionTitle::before {
position: absolute;
content: '';
top: 50%;
right: 25px;
transform: translateY(-50%) rotate(0);
width: 2px;
height: 20px;
background-color: #fff;
transition: all .5s;
}
/* 追加 */
.accordionTitle.active::before {
transform: translateY(-50%) rotate(90deg);
}
/* 追加 */
.accordionTitle::after {
position: absolute;
content: '';
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 20px;
height: 2px;
background-color: #fff;
}追加したコードの内容は主に疑似要素を使って「+」「-」の実装です。
また今回は、クリックするとそのクリックした要素にactiveクラスを追加するようにしています。
このactiveクラスを追加させることによって「+」の縦の線を横にして、「+」の横線と重ねて「-」に見せています。
ポイント
〇 「+」「-」は疑似要素で作成する
〇 activeクラスの追加で「+」から「-」に変化させている
〇 transitionプロパティを指定することで「+」の縦線を横にするときの動きが滑らかになる
JS（jQuery）の解説
JS（jQuery）では一文追加しています。
$(function () {
$('.accordionTitle').on('click',function () {
$(this).toggleClass('active'); // 追加
$(this).next().slideToggle();
})
});先程のCSSの解説でもありましたが、「+」から「-」に変化させるのはactiveクラスを追加して変化させています。
なので$(this).toggleClass('active');とは、accordionTitleクラスがクリックされたら、そのクリックしたaccordionTitleクラスに対してactiveクラスを追加するという意味のコードになります。
ポイント
〇 $(this).toggleClass('active');は、該当要素に対してactiveクラスを追加するコード
