【jQuery不要】CSSだけでアコーディオンを作る方法!

今回はjQueryを使わずにCSSだけでアコーディオンを作る方法を紹介します。

 

CSSだけでアコーディオンメニューを作る仕組み

まずはjQueryを使わずにどうやってアコーディオンを作るかをざっくり解説します。

使うのはHTMLのinputタグです。

このinputタグとラベルに、クリックしたら表示される要素(divタグなど)を入れます。inputタグにチェックが入ると中の要素を表示するようにします。

 

コード的にはinputとdivを同じ階層に並べ、最初はdivを非表示にしておきます。

「input:checked」となったときに中のdivを表示されるようにします。

 

コード

以下がコードです。

HTML

<div class="accbox">
  <!--ラベル1-->
    <label for="label1">クリックして表示1</label>
    <input type="checkbox" id="label1" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは1
      </p>
    </div>
    <!--//ラベル1-->
  <!--ラベル2-->
    <label for="label2">クリックして表示2</label>
    <input type="checkbox" id="label2" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは2
      </p>
    </div>
    <!--//ラベル2-->
  <!--ラベル3-->
    <label for="label3">クリックして表示3</label>
    <input type="checkbox" id="label3" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは3
      </p>
    </div>
    <!--//ラベル3-->
  <!--ラベル4-->
    <label for="label4">クリックして表示4</label>
    <input type="checkbox" id="label4" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは4
      </p>
    </div>
    <!--//ラベル4-->
</div><!--//.accbox-->

 

CSS

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#2f8fcf;
    font-weight: bold;
    background :#a4cbf3;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}

 

コードの解説

今回は4段のアコーディオンになっています。それぞれのラベルがクリックされるとdivタグの中身が表示されます。

最初に隠しておきたい要素は<div class="accshow"></div>タグの中に入れておきましょう。

 

CSSは.accbox input {display: none;}でチェックボックスを非表示にしています。アコーディオンなのにチェックボックスが見えていたらおかしいですからね。

 

.accbox .accshow {
    height: 0;/*高さを0に*/
    padding: 0;/*余白を0に*/
    overflow: hidden;/*非表示に*/
    opacity: 0;/*中身を透明に*/
    transition: 0.8s;/*クリック時の動きを滑らかに*/
}

この部分は中身を隠すコードです。

display: none;で非表示にすることもできますが、上記のように指定した方が滑らかに動くのでよりアコーディオンらしくなります。

 

.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}

チェックボックスにチェックが入った時(=クリックされた時)にheightをautoに変えて中身を表示します。

その他のpaddingやbackground-colorはお好みで変更してください。

 

アコーディオンに矢印をつける

このままでも十分ですが、せっかくなので矢印をつけるともっとアコーディオンらしくなります。

ラベルに矢印のアイコンを表示し、クリックすると矢印が下方向に向くようにしてみましょう。

 

HTML

<div class="accbox">
  <!--ラベル1-->
    <input type="checkbox" id="label1" class="cssacc" />
    <label for="label1">クリックして表示1</label>
    <div class="accshow">
      <!--ここに隠す中身-->
    </div>
    <!--//ラベル1-->
  <!--ラベル2-->
    <input type="checkbox" id="label2" class="cssacc" />
    <label for="label2">クリックして表示2</label>
    <div class="accshow">
      <!--ここに隠す中身-->
    </div>
    <!--//ラベル2-->
  <!--ラベル3-->
    <input type="checkbox" id="label3" class="cssacc" />
    <label for="label3">クリックして表示3</label>
    <div class="accshow">
      <!--ここに隠す中身-->
    </div>
    <!--//ラベル3-->
  <!--ラベル4-->
    <input type="checkbox" id="label4" class="cssacc" />
    <label for="label4">クリックして表示4</label>
    <div class="accshow">
      <!--ここに隠す中身-->
    </div>
    <!--//ラベル4-->  
</div><!--//.accbox-->

 

CSS

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffba47;
    font-weight: bold;
    background: #fff2cc;
    cursor :pointer;
    transition: all 0.5s;
}

/*アイコンを表示*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#ffe9a9;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}

 

矢印はFontAwesomeのアイコンを使用しています。

最初は右向きの矢印アイコンを表示し、クリックされたら下向きの矢印アイコンに変更します。

また、クリックされた時にアイコンを切り替えるため、こちらのコードではHTMLのinputとlabelの順番を入れ替えています。そのため、CSSのセレクタの指定も少し変わりました。

.cssacc:checked + label + .accshow {~}

 

+は隣接セレクタといい、文字通り隣のセレクタを指定します。

上のコードだと.cssacc:checkedの隣のlatelの隣の.accshowがセレクタとして選択されています。

 

以上がjQueryを使わずにCSSだけでアコーディオンを作る方法です。