アコーディオン – サンプル集

https://www.rural-web.com/coding/2494
目次

    はじめに

    本記事について

    本記事は、【アコーディオンを実装するためのサンプル】をまとめたものです。
    利用できる方は、お好きに活用してください。

    当サイトで公開している「ruralweb.css(準備中)」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

    検証ブラウザ・OS

    サンプル内容につきましては、最新ブラウザ・OS(IE/Chrome/Safari/FireFox/iOS/Android)で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

    注意事項

    自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたら「お問い合わせ」もしくはTwitterよりご連絡ください。

    コードサンプル

    ベーシックタイプ

    基本型

    クリック
    ここにコンテンツを表示
    クラス名
    rw-acc
    説明
    • jquery読み込み必須(ここでは3.3.1を利用)
    • レスポンシブ対応
    • 複数設置可、非連動なので個別に作動
    • dlタグのみ
    • アイコン利用のためFontAwesome導入
    • 最初に表示させておきたい場合は、dtに対してclass="on"と、ddに対してstyle:display:block;を付与させる
    コードを表示
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    $('.rw-acc > dt').click(function() {
    	$(this).toggleClass('on');
    	$(this).next().slideToggle('fast');
    });
    
    <dl class="rw-acc">
    	<dt>クリック</dt>
    	<dd>ここにコンテンツを表示</dd>
    </dl>
    
    dl.rw-acc {
    	width:100%;
    	margin:30px auto 0;
    }
    dl.rw-acc > dt {
    	position:relative;
    	display:block;
    	background-color:#1a73e8;
    	color:#fff;
    	text-align:center;
    	padding:10px 15px;
    	cursor:pointer;
    }
    dl.rw-acc > dt::after {
    	font-family: FontAwesome;
        content: "\f067";
        margin-left:5px;
    }
    dl.rw-acc > dt.on::after {
       content: "\f068";
    }
    dl.rw-acc > dt:hover {
    	background-color:#2b7de9;
    }
    dl.rw-acc > dd {
    	display:none;
    }
    
    最終更新:2019.10.14

    連動型

    クリック
    1-1コンテンツを表示
    クリック
    1-2コンテンツを表示
    クラス名
    rw-acc-mix
    説明
    • jquery読み込み必須(ここでは3.3.1を利用)
    • レスポンシブ対応
    • 複数設置可、連動型なので同時に2つ開かない
    • dlタグのみ
    • アイコン利用のためFontAwesome導入
    • 最初に表示させておきたい場合は、dtに対してclass="on"と、ddに対してstyle:display:block;を付与させる(1箇所のみ)
    コードを表示
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    $('.rw-acc-mix > dt').click(function () {
    	$('.rw-acc-mix > dt').siblings().not(this).removeClass('on');
    	$(this).parent().children('.rw-acc-mix > dd').not($(this).next('dd')).slideUp('fast');
    	$(this).toggleClass('on');
    	$(this).next().slideToggle('fast');
    });
    
    
    <dl class="rw-acc-mix">
    	<dt class="on">クリック</dt>
    	<dd style="display:block;">ここにコンテンツを表示</dd>
    	<dt>クリック</dt>
    	<dd>ここにコンテンツを表示</dd>
    </dl>
    
    dl.rw-acc-mix {
    	width:100%;
    	margin:30px auto 0;
    }
    dl.rw-acc-mix > dt {
    	position:relative;
    	display:block;
    	background-color:#1a73e8;
    	margin-top:1px;
    	color:#fff;
    	text-align:center;
    	padding:10px 15px;
    	cursor:pointer;
    }
    dl.rw-acc-mix > dt:first-child {
    	margin-top:0;
    }
    dl.rw-acc-mix > dt::after {
    	font-family: FontAwesome;
        content: "\f067";
        margin-left:5px;
    }
    dl.rw-acc-mix > dt.on::after {
       content: "\f068";
    }
    dl.rw-acc-mix > dt:hover {
    	background-color:#2b7de9;
    }
    dl.rw-acc-mix > dd {
    	display:none;
    }
    
    最終更新:2019.10.14

    更新履歴

    更新日時 更新内容
    2019.10.14 記事を作成