アコーディオンパネル
-任意の場所をクリックすると隠れていた内容が開く-
See the Pen 9-2-1 任意の場所をクリックすると隠れていた内容が開く by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内のアコーディオンをクリックして動きを確かめてね!
動きを実現する仕組み
jQuery のslideToggle を使い、HTML 内のタイトル要素をクリックして、直後のエリアを開閉する。
同時に、タイトル要素にクラス名を付与・除去することで、アイコンの形状をCSS で変化させる。
画面が読み込まれた際に開いておきたいアコーディオンパネルをJavaScript で指定してopen クラスを付与する。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-2-1.css"> </head>
- body内にアコーディオンのHTMLを記載します。
<ul class="accordion-area"> <li><!--li ~ /li までが一つのアコーディオン--> <section> <h3 class="title">タイトル</h3> <div class="box"> <p>内容が入ります。</p> </div> </section> </li> <li> <section> <h3 class="title">タイトル</h3> <div class="box"> <p>内容が入ります。</p> </div> </section> </li> </ul>
- body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--自作のJS--> <script src="js/9-2-1.js"></script> </body>
自作のCSS内の書き方
/*アコーディオン全体*/
.accordion-area{
list-style: none;
width: 96%;
max-width: 900px;
margin:0 auto;
}
.accordion-area li{
margin: 10px 0;
}
.accordion-area section {
border: 1px solid #ccc;
}
/*アコーディオンタイトル*/
.title {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size:1rem;
font-weight: normal;
padding: 3% 3% 3% 50px;
transition: all .5s ease;
}
/*アイコンの+と×*/
.title::before,
.title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: #333;
}
.title::before{
top:48%;
left: 15px;
transform: rotate(0deg);
}
.title::after{
top:48%;
left: 15px;
transform: rotate(90deg);
}
/* closeというクラスがついたら形状変化 */
.title.close::before{
transform: rotate(45deg);
}
.title.close::after{
transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box {
display: none;/*はじめは非表示*/
background: #f3f3f3;
margin:0 3% 3% 3%;
padding: 3%;
}
自作のJS内の書き方
//アコーディオンをクリックした時の動作
$('.title').on('click', function() {//タイトル要素をクリックしたら
var findElm = $(this).next(".box");//直後のアコーディオンを行うエリアを取得し
$(findElm).slideToggle();//アコーディオンの上下動作
if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
$(this).removeClass('close');//クラス名を除去し
}else{//それ以外は
$(this).addClass('close');//クラス名closeを付与
}
});
//ページが読み込まれた際にopenクラスをつけ、openがついていたら開く動作※不必要なら下記全て削除
$(window).on('load', function(){
$('.accordion-area li:first-of-type section').addClass("open"); //accordion-areaのはじめのliにあるsectionにopenクラスを追加
$(".open").each(function(index, element){ //openクラスを取得
var Title =$(element).children('.title'); //openクラスの子要素のtitleクラスを取得
$(Title).addClass('close'); //タイトルにクラス名closeを付与し
var Box =$(element).children('.box'); //openクラスの子要素boxクラスを取得
$(Box).slideDown(500); //アコーディオンを開く
});
});
この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!