しん随筆

Fラン大学卒の2年間の空白期間持ち豆腐メンタルがやる気出してます。

アコーディオンUIの作り方

 今日はJavaScriptでFAQページなんかでよく使われる、アコーディオンUIを作ったので、まとめていこうと思います。

 

1.HTMLの準備

 今回はアコーディオン全体を<div class="accordion" id="js-faq">で囲みその中にアコーディオントリガー部分となる、<a href="" class="accordion-trigger">タグ、答えとなる<div class="accordion-contents">を用意します。

 

<body>
<!-- prepare a variety of patterns of text to confirm the function -->
<div class="accordion" id="js-faq">
<a href="" class="accordion-trigger">
Q1.Why is your face so funny?
</a>
<div class="accordion-contents">
A1.I don't know. When I'm aware of this condition, it was too late.
</div>
<a href="" class="accordion-trigger">
Q2.Como aprendiste español?
</a>
<div class="accordion-contents">
A2.
A2.Segui hablando por si mismo y alugun dia me di cuenta de que ya habre aprendido a hablarlo.
</div>
</div>


<script src="app.js"></script>
</body>

 

2.CSSでスタイリング

 アコーディオンUIっぽくスタイリングします。

 今回、大事なのは、.accordion-contetntsに対してdisplay:none;をかけることによって、デフォルトでは、コンテンツ部分が見えないようにすることです。

.accordion{
width:500px;
margin:0 auto;
}

.accordion-trigger{
margin:0;
padding:10px;
display: block;
background: #333;
color: #FFF;
border-top: 1px solid #fff;
}

.accordion-contents{
margin:0;
padding:10px;
border: 1px solid #ccc;
display: none;
}

 

3.JavaScriptのコーディング

 まず最初にそれぞれの要素を取得します。

 

 次に、クリックした時の処理を関数clickHandlerとして宣言します。

 この時の処理として、

  (1) <a>タグのデフォルト機能を無効にしておく

  (2)クリックした<a>タグの要素の次の要素(ここでは<div class="accordion-contents">)を"nextElementSibling"と"e"を用いて取得する

  (3)if文で.accordion-contentsが"display:block;"であれば、"display:none;"に、反対に、"display:none;"であれば、"display:block;"にするロジックを書きます。

 

 最後にwhile文で用意しているトリガー全てに、addEventListenerを用いて完成です。

 

const $elm = document.querySelector("#js-faq");
const $trigger = $elm.getElementsByTagName("a");
const triggerLen = $trigger.length;
let index = 0;
 
const clickHandler = (e)=>{
e.preventDefault();
const $target = e.currentTarget;
const $content = $target.nextElementSibling;
if($content.style.display==="block"){
$content.style.display = "none";
}else{
$content.style.display="block";
}
}
while(index<triggerLen){
$trigger[index].addEventListener('click', (e)=>clickHandler(e))
index++;
}

 

 今回は、アコーディオンUIを作りました。

 今回は「セイト先生のWeb・IT塾」さんの動画を参考にさせていただきました。

 

youtu.be

 いつも本当に分かりやすい動画ありがとうございます🙇‍♂️