HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-2-2.css">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-2.js"></script>
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() {//タイトル要素をクリックしたら
$('.box').slideUp(500);//クラス名.boxがついたすべてのアコーディオンを閉じる
var findElm = $(this).next(".box");//タイトル直後のアコーディオンを行うエリアを取得
if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
$(this).removeClass('close');//クラス名を除去
}else{//それ以外は
$('.close').removeClass('close'); //クラス名closeを全て除去した後
$(this).addClass('close');//クリックしたタイトルにクラス名closeを付与し
$(findElm).slideDown(500);//アコーディオンを開く
}
});
//ページが読み込まれた際に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); //アコーディオンを開く
});
});
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-2-1.css">
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>
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); //アコーディオンを開く
});
});