アコーディオンを作ってみよう

ホーム
BLOG
css, html, js
アコーディオンを作ってみよう

js
2019.03.15

はじめに

メニューボタンを押したら隠れていた情報が表示されるような物を作りたいのですが、どのようにしたらいいですか？

それはアコーディオンと呼ばれるものですね。メニューを押すとそのメニューに対応する情報が表示されるといったものです。

アコーディオンと言うのですね。
それは作るのが難しいでしょうか。

そうですね。cssとjavascriptをうまく使うと実現可能です。サンプルコードと合わせてご説明していきましょうか。

アコーディオンを実装します。

今回の記事では、cssとjavascriptを使ってアコーディオンを作成してきたいと思います。

サンプルコード

HTML


<!DOCTYPE html>
<head>
  <title>アコーディオンを作ってみよう</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css"\>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
  <div class="accordion">
    <div class="demo_menu">>Menu1</div>
    <div class="content">
      <ul>
        <li><a href="">情報1</a></li>
		<li><a href="">情報2</a></li>
		<li><a href="">情報3</a></li>
      </ul>
    </div>
	<div class="demo_menu">>Menu2</div>
    <div class="content">
      <ul>
        <li><a href="">情報4</a></li>
		<li><a href="">情報5</a></li>
		<li><a href="">情報6</a></li>
      </ul>
    </div>
  </div>
  <script src="common.js"></script>
</body>
</html>

CSS


.accordion .content{
    display:none;
}
.demo_menu{
    text-align:center;
    width:300px;
    height:2em;
    background:blue;
    color:#fff;
    border-bottom:1px solid #fff;
}
.demo_menu.open{
    background:red;
}

js


$('.accordion .demo_menu').on('click',function(){
    $(this).toggleClass('open');
    $(this).next('.content').slideToggle();
});

上記のコードの考え方としては、htmlのMenu1、Menu２には、demo_menuというクラスがついています。まずこちらがクリックされたかどうかをjqueryを使って判断させます。
demo_menuがクリックされた際、そのdemo_menuというクラスがついている次のcontentというクラスが slideToggle() (表示されていなければ下にスライドしながら中身を表示させ、表示されていれば、スライドしながら非表示にするといった動きをするもの）されるといった動きで今回は、アコーディオンを実装しています。また、クリックされたdemo_menuには、メニューが開いていますといったことをコードに伝えるために、openというクラスが展開中は付加されるようにしています。
このopenをつけることで、メニューが展開されている時の挙動をcss側でデザインなどを変更することができます。今回はcssで展開中は背景が赤くなるように設定しています。

サンプルコードの実装例

Menu1

Menu2

上記のサンプルプログラムを実装しますと、このような動きになります。
クリックイベントを取得して、そのクリックされたdemo_menuに対応するcontentを表示、非表示を切り替えることで実現されています。
また展開された時にopenのクラスがついていますので、背景を変えたりといったことができるようになります。