CSSのみでアコーディオンメニューを実現する方法:-JS・jQueryありもご紹介-
今回はCSSとhtmlだけで作るアコーディオンと、JS(jQuery)を読み込んで実現する方法とをそれぞれご紹介します。
レスポンシブデザインによるPC・スマホ一体型レイアウトがWEBサイト制作の必須項目となっています。
アコーディオンメニューは、スマホのような狭い画面範囲で情報を任意で表示することができ、ユーザビリティの観点から見ても重要な技術です。
アコーディオンメニューはたくさんの実現方法があります。
CSSとhtmlでアコーディオンメニューを作る機会やたくさんあると思います。
本記事ではJS(jQuery)なしでCSSのみで構築するパターンと、JSを読み込んで実現できるパターンと様々なアコーディオンを用意しました。
丸ごとコピペして、さらにオリジナルの加工・装飾を加えてみてはいかがでしょうか。
CSSのみアコーディオン例1
まずはCSSのみで実現するアコーディオンです。input機能を使っていますが、ここではわかりやすい様にinputは表示させたままにしています。
不必要であればチェックマークの部分は非表示にしましょう。
CSSのみアコーディオンサンプル1
内容が入ります。
内容が入ります。
内容が入ります。
HTMLソース
<input id="ac-check1" class="ac-check" type="checkbox"> <label class="ac-label" for="ac-check1">アコーディオン1</label> <div class="ac-content"> <p>内容が入ります。</p> </div> <input id="ac-check2" class="ac-check" type="checkbox"> <label class="ac-label" for="ac-check2">アコーディオン2</label> <div class="ac-content"> <p>内容が入ります。</p> </div> <input id="ac-check3" class="ac-check" type="checkbox"> <label class="ac-label" for="ac-check3">アコーディオン3</label> <div class="ac-content"> <p>内容が入ります。</p> </div>
CSS
/*非表示をコメントアウトしています*/ /* .acd-check{ display: none; } */ .ac-label{ background: #454545; color: #fff; display: block; margin-bottom: 1px; padding: 10px; } .ac-content{ border: 1px solid #454545; height: 0; opacity: 0; padding: 0 10px; transition: .5s; visibility: hidden; } .ac-check:checked + .ac-label + .ac-content{ height: 50px; opacity: 1; padding: 5px 10px; visibility: visible; }
CSSのみアコーディオン例2
次もinputを使ったアコーディオンです。
上のパターンよりもシンプルな構成ですのですぐに使う事ができます。
CSSのみアコーディオンサンプル2
HTMLソース
<div class="menu"> <label for="type1">アコーディオン1</label> <input type="checkbox" id="type1" class="accordion"> <ul id="links1"> <li>内容が入ります。</li> </ul> <label for="type2">アコーディオン2</label> <input type="checkbox" id="type2" class="accordion"> <ul id="links2"> <li>内容が入ります。</li> </ul> <label for="type3">アコーディオン3</label> <input type="checkbox" id="type3" class="accordion"> <ul id="links3"> <li>内容が入ります。</li> </ul> </div>
CSS
label { display: block; margin: 0 0 4px 0; padding : 15px; line-height: 1; color :#fff; background : green; cursor :pointer; } input { display: none; } .menu ul { margin: 0; padding: 0; background :#f4f4f4; list-style: none; } .menu li { height: 0; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #type1:checked ~ #links1 li, #type2:checked ~ #links2 li { height: 54px; opacity: 1; }
ブロック要素を持たせたlabelをクリックする事で、高さを持っていないli要素に高さを持たせます。
その際にゆっくりと高さを持たせるようにしていますね。
CSS・JSありアコーディオン例1
ここからはJS(jQuery)を読み込ませるタイプのアコーディオン機能を紹介します。
JSを読み込ませるのは決して難しい事ではありませんし、jQueryはWordpressサイトであればデフォルトで読み込まれます。
ですので実現はそう難しくはないはずです。
アコーディオンサンプル
HTMLソース
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">アコーディオン1</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <p><span class="list-icon pull-right"><i class="fa fa-thumbs-up"></i></span>内容が入ります。</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseTwo">アコーディオン2</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <p><span class="list-icon pull-right"><i class="fa fa-star"></i></span>内容が入ります。</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseThree">アコーディオン3</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <p><span class="list-icon pull-right"><i class="fa fa-coffee"></i></span>内容が入ります。</p> </div> </div> </div> </div>
CSS
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05) } .panel-body { padding: 15px } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px } .panel-heading>.dropdown .dropdown-toggle { color: inherit } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit } .panel-group { margin-bottom: 20px } .panel-group .panel { margin-bottom: 0; border-radius: 4px } .panel-group .panel+.panel { margin-top: 5px } .panel-group .panel-heading { border-bottom: 0 } .panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body { border-top: 1px solid #ddd } .panel-default { border-color: #ddd } .panel-default>.panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd } .panel-default>.panel-heading+.panel-collapse>.panel-body { border-top-color: #ddd }
JSコード
<script src="../js/jquery.js"></script> jquery.jsファイルをダウンロードしてページ内(フッター等)に読み込むだけです。
CSS・JSありアコーディオン例2
同じくJSありのアコーディオンメニューです。
展開した時に左側のマークが開店するところが面白いギミックですね。
アコーディオンサンプル
HTMLソース
<div class="section-content"> <div class="wt-accordion acc-default" id="accordion1"> <div class="panel wt-panel"> <div class="acod-head acc-actives"> <h4 class="acod-title text-uppercase"><a data-toggle="collapse" href="#collapseOne1" data-parent="#accordion1"><i class="fa fa-globe"></i>アコーディオン1<span class="indicator"><i class="fa fa-plus"></i></span></a></h4> </div> <div id="collapseOne1" class="acod-body collapse in"> <div class="acod-content p-tb15">内容が入ります。</div> </div> </div> <div class="panel wt-panel"> <div class="acod-head"> <h4 class="acod-title text-uppercase"> <a data-toggle="collapse" href="#collapseTwo1" class="collapsed" data-parent="#accordion1"><i class="fa fa-photo"></i>アコーディオン2<span class="indicator"><i class="fa fa-plus"></i></span></a></h4> </div> <div id="collapseTwo1" class="acod-body collapse"> <div class="acod-content p-tb15">内容が入ります。</div> </div> </div> <div class="panel wt-panel"> <div class="acod-head"> <h4 class="acod-title text-uppercase"> <a data-toggle="collapse" href="#collapseThree1" class="collapsed" data-parent="#accordion1"><i class="fa fa-cog"></i>アコーディオン3<span class="indicator"><i class="fa fa-plus"></i></span></a></h4> </div> <div id="collapseThree1" class="acod-body collapse"> <div class="acod-content p-tb15">内容が入ります。</div> </div> </div> </div> </div>
CSS
.wt-accordion .wt-panel { background-color:transparent; border:none; margin-bottom:10px; border-radius:0; -webkit-border-radius:0px; -moz-border-radius:0; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; } .acod-head { position:relative; } .acod-title { margin-top:0; margin-bottom:0; } .acod-title a{ position:relative; z-index:1; overflow:hidden; } .acod-head .fa { margin-right:5px; } .acod-head a { display:block; padding:15px 40px 15px 15px; } .acod-head a, .acod-head a:hover, .acod-head a:active, .acod-head a:focus { color:#3d474a; } .acod-body { color:#777; } .acod-head .indicator { padding:15px; color:#ababab; position:absolute; right:0; top:0; } .acod-head .indicator .fa, .acod-head.acc-actives .indicator .fa { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .acod-head.acc-actives .indicator .fa, .acod-head [aria-expanded="true"] .indicator .fa { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .acc-default .acod-title a { padding:5px 0; } .acc-default .acod-head .indicator { padding:0; } .acc-outline .acod-title a { border:1px solid #ddd; }
JSコード
<script src="../js/jquery.js"></script> jquery.jsファイルをダウンロードしてページ内(フッター等)に読み込むだけです。
CSS・JSありアコーディオン例3
次はクリックしたときにブロックが一瞬沈んで浮き上がると同時に中身が展開するギミックです。オレンジ色でわかりやすくしています。
オシャレで高級感あふれるパターンと言えるでしょう。
アコーディオンサンプル
-
アコーディオン1内容が入ります。
-
アコーディオン2内容が入ります。
-
アコーディオン3内容が入ります。
HTMLソース
<ul class="accordion-box"> <li class="accordion block active-block"> <div class="acc-btn active">アコーディオン1 <div class="icon fa fa-plus-square"></div></div> <div class="acc-content current"> <div class="content"> <div class="text">内容が入ります。</div> </div> </div> </li> <li class="accordion block"> <div class="acc-btn">アコーディオン2 <div class="icon fa fa-plus-square"></div></div> <div class="acc-content"> <div class="content"> <div class="text">内容が入ります。</div> </div> </div> </li> <li class="accordion block"> <div class="acc-btn">アコーディオン3 <div class="icon fa fa-plus-square"></div></div> <div class="acc-content"> <div class="content"> <div class="text">内容が入ります。</div> </div> </div> </li> </ul>
CSS
.accordion-box .block .acc-btn{ position:relative; font-size:16px; line-height:28px; color:#252525; font-weight:500; cursor:pointer; padding:15px 25px 15px; padding-right: 50px; border:1px solid #dddddd; font-family: "Rubik", sans-serif; background-color: #ffffff; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; margin-bottom: 20px; } .accordion-box .block .acc-btn.active{ background-color: #ff8a00; border-color: #ff8a00; color:#ffffff; margin-bottom: 0px; } .accordion-box .block .icon{ position:absolute; right: 15px; top:15px; height: 30px; width: 30px; font-size: 18px; line-height: 30px; color: #252525; text-align: center; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .accordion-box .block .acc-btn.active .icon:before{ position: absolute; left: 0; top: 0; height: 30px; width: 30px; line-height: 30px; opacity:1; z-index: 1; color: #ffffff; font-size: 18px; content: "\f146"; font-family: "FontAwesome"; text-align: center; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .accordion-box .block .acc-content{ position:relative; display:none; background-color: #ffffff; } .accordion-box .block .content{ position:relative; padding: 20px 25px; margin-bottom: 0; } .accordion-box .block .acc-content.current{ display: block; } .accordion-box .block .content .text{ display: block; font-size: 14px; line-height: 30px; color: #777777; }
JSコード
(function ($) { 'use strict'; if($('.accordion-box').length){ $(".accordion-box").on('click', '.acc-btn', function() { var outerBox = $(this).parents('.accordion-box'); var target = $(this).parents('.accordion'); if($(this).hasClass('active')!==true){ $(outerBox).find('.accordion .acc-btn').removeClass('active '); } if ($(this).next('.acc-content').is(':visible')){ return false; }else{ $(this).addClass('active'); $(outerBox).children('.accordion').removeClass('active-block animated fadeInUp'); $(outerBox).find('.accordion').children('.acc-content').slideUp(300); target.addClass('active-block animated fadeInUp'); $(this).next('.acc-content').slideDown(300); } }); } })(window.jQuery); 上記コードとjQueryファイルの読み込みが必要です。
上記コードをJSに記述し、jQueryファイルを読み込みましょう。
CSS・JSありアコーディオン例4
左のプラス・マイナスマークがかわいいデザインのアコーディオンです。
視覚的にすぐわかるので、FAQページなどで使うと良いと思います。
CSSアコーディオンサンプル
アコーディオン
内容が入ります。
アコーディオン
内容が入ります。
アコーディオン
内容が入ります。
HTMLソース
<div class="faqwrper"> <div class="faqbox"> <div class="fp-accordion style-1 active"> <div class="accordion-title"><span class="icons"><i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-minus" aria-hidden="true"></i></span> <h3>アコーディオン</h3> </div> <div class="toggle-content"> <p>内容が入ります。</p> </div> </div> <div class="fp-accordion style-1"> <div class="accordion-title"><span class="icons"><i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-minus" aria-hidden="true"></i></span> <h3>アコーディオン</h3> </div> <div class="toggle-content"> <p>内容が入ります。</p> </div> </div> <div class="fp-accordion style-1"> <div class="accordion-title"><span class="icons"><i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-minus" aria-hidden="true"></i> </span> <h3>アコーディオン</h3> </div> <div class="toggle-content"> <p>内容が入ります。</p> </div> </div> </div> </div>
CSS
.fp-accordion h3 { font-size: 16px; font-weight: 900; margin: 0; color: #fff; padding: 15px 10px; cursor: pointer; border: none !important; background: #1abc9c; } .faqwrper { margin: 30px 0 0; } .faqwrper h3 span { font-weight: 600; } .fp-accordion .toggle-content { display: none; } .fp-accordion .icons { display: inline-block; text-align: center; position: relative; cursor: pointer; transition: 0.5s; } .fp-accordion .icons .fa { font-size: 14px; color: #73b21a; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s; } .fp-accordion .icons .fa:last-child { opacity: 0; } .fp-accordion .icons:hover { background-color: #73b21a; } .fp-accordion .icons:hover .fa { color: #fff; } .fp-accordion.active .toggle-content { display: block; } .fp-accordion.active .icons { background-color: #fac012; } .fp-accordion.active .fa:last-child { opacity: 1; color: #fff; } .fp-accordion.active .fa:first-child { opacity: 0; } .fp-accordion.style-1 { border: 1px solid #eee; margin-bottom: 10px; padding: 2px 10px 5px; } .fp-accordion.style-1 .toggle-content, .fp-accordion.style-1 h3 { margin-left: 55px; } .fp-accordion.style-1 .toggle-content { padding-bottom: 15px; } .fp-accordion.style-1 .icons { width: 35px; height: 35px; line-height: 35px; margin-top: 10px; border-radius: 50%; float: left; } .fp-accordion.style-1 .icons .fa { font-size: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s; } .fp-accordion.style-1 .icons .fa:last-child { opacity: 0; } .fp-accordion.style-1 .icons:hover .fa { color: #fff; } .fp-accordion.style-1.active .toggle-content { display: block; } .fp-accordion.style-1.active .fa:last-child { opacity: 1; color: #fff; } .fp-accordion.style-1.active .fa:first-child { opacity: 0; }
JSコード
(function ($) { 'use strict'; if($('.fp-accordion').length){ $( '.fp-accordion' ).on( 'click', 'h3, .icons', function() { var $faq = $( this ).closest( '.fp-accordion' ); $faq.find( '.toggle-content' ).slideToggle( 500, function() { $faq.toggleClass( 'active' ); } ); } ); } })(window.jQuery); 上記コードとjQueryファイルの読み込みが必要です。
上記コードをJSに記述し、jQueryファイルを読み込みましょう。
CSS・JSありアコーディオン例5
次はアコーディオンの展開にアニメーション機能を持たせたタイプです。
枠内に捕らわれれず非常に滑らかな動きをするのが特徴ですね。
コード量も非常に少ないので、簡単に実装できます。。
CSSアコーディオンサンプル
HTMLソース
<div class="accordion animated"> <div class="acd-group"> <a href="#" class="acd-heading">アコーディオン1</a> <div class="acd-des">内容が入ります。</div> </div> <div class="acd-group"> <a href="#" class="acd-heading">アコーディオン2</a> <div class="acd-des">内容が入ります。</div> </div> <div class="acd-group"> <a href="#" class="acd-heading">アコーディオン3</a> <div class="acd-des">内容が入ります。</div> </div> </div>
CSS
.accordion .acd-group .acd-heading:before { font-family: fontawesome; } .accordion .acd-group .acd-heading:before { cursor: pointer; position: absolute; top: 6px; right: 20px; display: block; padding: 3px 6px 2px; content: "\f105"; font-size: 22px; line-height: 38px; } .accordion .acd-group > .acd-heading > span { margin-right: 15px; } .accordion .acd-heading { font-weight: 500; position: relative; padding: 20px !important; color: #353535; line-height: normal; cursor: pointer; background-color: #1abc9c; margin-bottom: 10px; display: block; font-family: 'Montserrat', sans-serif; text-transform: uppercase; border-radius: 3px; } .acd-des { padding: 0 20px 20px 0; } .accordion .acd-group.acd-active .acd-heading, .accordion .acd-group .acd-heading:hover { color: #84ba3f; } .accordion .acd-group.acd-active .acd-heading:before { content: "\f107"; } .accordion .acd-group.acd-active .acd-heading span { color: #fff; } .accordion.animated .acd-group .acd-heading { box-shadow: none; border:none; font-size: 18px; margin-bottom: 0; color:#363636; text-transform: inherit; font-weight: 700; padding: 20px 0px 0; } .accordion.animated .acd-group.acd-active .acd-heading { font-size: 28px; color: #84ba3f; margin-bottom: 20px; background: none !important;} .accordion.animated .acd-group .acd-heading:hover{background: none !important; color: #84ba3f;} .accordion.animated .acd-group .acd-heading::before { display: none; } .accordion.animated .acd-group .acd-des { padding: 0 30px 20px; }
JSコード
(function($){ "use strict"; $('.accordion').each(function (i, elem) { var $elem = $(this), $acpanel = $elem.find(".acd-group > .acd-des"), $acsnav = $elem.find(".acd-group > .acd-heading"); $acpanel.hide().first().slideDown("easeOutExpo"); $acsnav.first().parent().addClass("acd-active"); $acsnav.on('click', function () { if(!$(this).parent().hasClass("acd-active")){ var $this = $(this).next(".acd-des"); $acsnav.parent().removeClass("acd-active"); $(this).parent().addClass("acd-active"); $acpanel.not($this).slideUp("easeInExpo"); $(this).next().slideDown("easeOutExpo"); }else{ $(this).parent().removeClass("acd-active"); $(this).next().slideUp("easeInExpo"); } return false; }); }); })(jQuery); 上記コードとjQueryファイルの読み込みが必要です。
上記コードをJSに記述し、jQueryファイルを読み込みましょう。
まとめ
CSSのみのアコーディオンはinputを使ったものが多いですね。
チェックボックスをクリックされたときに、アコーディオンの内容を表示するようCSSを書いていきます。
・checkboxにブロック要素を付ける
・クリックされた時に、ブロック要素を表示させる
・滑らかに展開するようにtransitionを設定
この辺りがポイントになりますね。要素がチェックされた時にブロック要素を持ったクラスが高さを持つことで、アコーディオンのような動きを実現します。
それに対してjQueryを使った場合はデザイン性の高いアコーディオン機能が実現できますね。
しかし最近はシンプル性も重要なのでこの辺りはユーザビリティに応じた選択となるかもしれません。
今回紹介した以外にも様々な実現方法がありますので、多彩に実現できるように引出しを多く持っておきましょう。
モバイルユーザービリティで引っかかる
このようなアコーディオンメニューを実装すると、モバイルユーザービリティで「コンテンツの幅が画面の幅を超えています」というエラーが出る場合があります。
Google Search Consoleのモバイルユーザビリティページ
これは、アコーディオンメニュー部分がレイアウト枠内を少し飛び出している事が原因です。
表示としては問題は無いのですが、気になる様であれば幅を100%以下に収める設定をして下さい。