jQueryで簡単に開いたり閉じたりするアコーディオンパネルをつくる

マークアップ

今回はwebサイトでよくみかける、アコーディオンパネルをつくりたいと思います。

アコーディオンパネルを実装して情報をコンパクトにまとめましょう。

まず、アコーディオンパネルって?

アコーディオンパネルとはクリックやタッチをすることで、そのコンテンツの詳細な情報が表示されるようなデザインのことです。

楽器のアコーディオンのように、開いたり閉じたりすることから、このような呼び方がされるようになったんですね。

このようなデザインです。よく見かけますよね。

アコーディオンパネルの仕組み

今回作るアコーディオンパネルの仕組みについて、ざっくりと解説したいと思います。

まず、最初は中身となるdivタグを非表示にしておいて、

リストのdivタグをクリックすると、表示されるようにします。

矢印ボタンの切り替わりは、jQueryでクラスを加えて、background-positionで制御していきます。

下記画像のように、上下一体の矢印画像を png形式 で作成します。

矢印の間隔は1px空けておきます。

このときはbackground-position:bottomに指定しておいて、

リストのdivタグをクリックすると、jQueryでクラスを付与してbackground-position:topになるように指定します。

jQueryでつくってみる。

では、実際にサンプルとしてアコーディオンパネルを作ってみたいと思います。

HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>タブ作成例</title>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
    <section id="tab">
        <dl>
            <dt class="tab__title js-accordion toggle__bg">リスト</dt>
            <dd class="tab__text open-close" style="display:none;">
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ 
                ストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ 
                スト
            </dd>
        </dl>
    </section><!-- Component:section#tab -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/home.js"></script>
</body>
</html>

CSS

body{
    width: 640px;
    margin: 0 auto;
}
dd{
    margin: 0;
}
.tab__title { 
    position: relative;
    padding: 10px 10px;
    background: #ffff99;
    color: #333333;
    font-size: 14px;
}
.tab__text {
    position: relative; 
    padding: 15px 15px; 
    background: #ffccff; 
    color: red; 
    font-size: 14px; 
}
.toggle__bg:after {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
    width: 21px;
    height: 12px;
    background: url(../images/arrow.png) no-repeat;
    background-position: bottom;
    background-size: cover;
    content: '';
}
.toggle__bg.active:after {
    background-position: top;
}

JavaScript

$('.js-accordion').click(function(event){
	$(this).toggleClass("active");
	$(this).next(".open-close").slideToggle("fast");
});

jQueryについて解説

$('.js-accordion').click(function(event){
});

js-accordionというクラス名がついたタグをクリックしたときに発生する。

$(this).toggleClass("active");

トグル関数を使用して、activeというクラスがついていなかったら追加して、

activeというクラスがついていたら削除します。

$(this).next(".open-close").slideToggle("fast");

スライドトグル関数を使用して、open-closeというクラス名がついたタグが表示されているときは、slideUpをして非表示にして、非表示になっているときは、slideDownして表示します。

DEMO

まとめ

アコーディオンパネルはjQueryを少し記述するだけで簡単に実装できます。

この情報をコンパクトにまとめたいなと思う場面があれば、ぜひ実装してみてください。

コメント

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