アコーディオンメニューとは
アコーディオンメニューは、名前の通り楽器のアコーディオンのように伸び縮みする機能を持ったUIの一種です。普段は折りたたまれていますが、ボタンクリックなどを引き金として表示領域を広げます。不要な時は折りたたんでおくことでWEBサイトをすっきりさせつつ、ユーザーが興味を持つ情報は選択的に表示可能。情報量が多いサイトを中心に、よく使われています。
アコーディオンメニューのサンプル
Test[Header]
[open]
Acordiog[Body-Text]
Test[Header]
[open]
Acordiog[Body-Text]
Test[Header]
[open]
Acordiog[Body-Text]
今回は、一つをオープンにすると、他のメニューを閉じる仕様にしています。全部独立して閉じたり開けたりするタイプは、また別の機会に紹介する予定です。
アコーディオンメニューの活用シーン
- Q&Aのコーナー
- お知らせやニュースなど
- 目次やインデックス
基本的にFAQコーナー、よくある質問コーナーで使うケースが多いでしょう。質問部分だけを表示しておき、見たい部分だけをクリックで表示させます。これにより、ユーザーは自身が探している項目を見つけやすくなるわけです。
他には、目次として使うケースもあります。親カテゴリーを表示させて置き、クリックしたら子カテゴリーや孫カテゴリーを表示する形です。
クリックで開け閉めするほか、ホバーした時にアクションさせることもあります。
アコーディオンメニューの作り方
ボタン役になるDIV要素と、 本文の表示用のDIV要素の二つを設けています。表示用のDIVはあらかじめ非表示にして置き、JAVASCRIPTでクラスを付与したら表示させます。この際、表示状態になっている他のDIV要素はクラスを除去して、非表示状態にさせます。
アニメーションを付け加えると、アコーディオンの伸び縮みのように見えます。
ソースコード
HTML
<div class="acor2">
<div class="acor2H">
<div class="acor2L">Test[Header]</div><div class="acor2R">
[open]</div>
</div>
<div class="acor2u acor2OFF">Acordiog[Body-Text]</div>
</div>
<div class="acor2">
<div class="acor2H">
<div class="acor2L">Test[Header]</div><div class="acor2R">
[open]</div>
</div>
<div class="acor2u acor2OFF">Acordiog[Body-Text]</div>
</div>
<div class="acor2">
<div class="acor2H">
<div class="acor2L">Test[Header]</div><div class="acor2R">
[open]</div>
</div>
<div class="acor2u acor2OFF">Acordiog[Body-Text]</div>
</div>
CSS
.acor2{
width:80%;
height:auto;
border: #aaaaaa 1px solid;
box-sizing: border-box;
padding:15px 0px 0 0px;
margin:0 0 30px 0 ;
}
.acor2H{
display: flex;
font-weight: 900;
padding:0 40px 15px 30px;
}
.acor2R{
width:30px;
margin-left:auto;
text-align: right;
cursor: pointer;
color:#335588;
}
.acor2u{
line-height: 20px;
transition:opacity 0.3s;
transition: height 0.5s;
background-color: #eaefff;
margin:0 15px 15px 15px;
padding:20px 0 20px 20px;
}
.acor2OFF{
transition:opacity 0.3s;
transition: height 0.5s;
padding:0;
margin:0;
height:0;
opacity: 0;
}
@keyframes aniAco {
0% {
height:auto;
}
100% {
height:0;
}
}
JavaScript
//ze-no:WebDevelopment
var acor2=document.querySelectorAll('.acor2R');
var acor2BD=document.querySelectorAll('.acor2u');
var acoX=0;
var acoX2=0;
var ACOval
var AcoID
var aryAco=[9999];
let ACOstyle;
window.addEventListener('DOMContentLoaded', function() {
acor2.forEach(ele => {
ACOval="ACOID"+acoX
acor2[acoX].setAttribute("id",ACOval);
ACOval+="bd"
acor2BD[acoX].setAttribute("id",ACOval);
acor2BD[acoX].classList.add("acor2OFF");
console.log("acor2[acoX].",acor2[acoX])
console.log("acor2BD[acoX].",acor2BD[acoX])
acoX++;
});
var i=0;
acor2BD.forEach(ele => {
var lineHaco;
aryAco[i]=acor2BD[i].clientHeight
ACOstyle= window.getComputedStyle(acor2BD[i]);
console.log("aryAco[i]", ACOstyle,"::lineHaco-",lineHaco)
lineHaco=ACOstyle.getPropertyValue("line-height");
lineHaco=parseInt(lineHaco)
aryAco[i]+=lineHaco
i++;
console.log("aryAco[i]", ACOstyle,"::lineHaco-",lineHaco)
});
})
let TGTACO= document.getElementById(AcoID);
acor2.forEach(function(ele,i){
ele.addEventListener("click", function(event) {
AcoID=ele.getAttribute('id')
console.log("acor2",AcoID)
acoX2=i
console.log("acor2i",i)
AcoID=ele.getAttribute('id')+"bd";
acor2.forEach( elex =>{
if(ele!=elex){
AcoID=elex.getAttribute('id')+"bd";
TGTACO= document.getElementById(AcoID);
TGTACO.classList.add("acor2OFF");
console.log("OFF.",TGTACO)
}else{
AcoID=ele.getAttribute('id')+"bd";
TGTACO= document.getElementById(AcoID);
TGTACO.classList.toggle("acor2OFF");
}
Saco()
});
});
});
function Saco(){
acor2BD.forEach(function( ele,i){
var heightACO=aryAco[i];
var cls= ele.classList.contains('acor2OFF')
console.log("cls",cls);
if(cls!=true){
ele.style.height = heightACO + "px";
acor2[i].innerText="[close]"
console.log("OPEN:Ze-No Acordiron:heightACO=",heightACO);
}else{
ele.style.height =0;
acor2[i].innerText="[open]"
console.log("Close:Ze-No Acordiron:",ele.style.height);
}
console.log("Click.",TGTACO)
});
};
var acor2=document.querySelectorAll('.acor2R');
var acor2BD=document.querySelectorAll('.acor2u');
var acoX=0;
var acoX2=0;
var ACOval
var AcoID
var aryAco=[9999];
let ACOstyle;
window.addEventListener('DOMContentLoaded', function() {
acor2.forEach(ele => {
ACOval="ACOID"+acoX
acor2[acoX].setAttribute("id",ACOval);
ACOval+="bd"
acor2BD[acoX].setAttribute("id",ACOval);
acor2BD[acoX].classList.add("acor2OFF");
console.log("acor2[acoX].",acor2[acoX])
console.log("acor2BD[acoX].",acor2BD[acoX])
acoX++;
});
var i=0;
acor2BD.forEach(ele => {
var lineHaco;
aryAco[i]=acor2BD[i].clientHeight
ACOstyle= window.getComputedStyle(acor2BD[i]);
console.log("aryAco[i]", ACOstyle,"::lineHaco-",lineHaco)
lineHaco=ACOstyle.getPropertyValue("line-height");
lineHaco=parseInt(lineHaco)
aryAco[i]+=lineHaco
i++;
console.log("aryAco[i]", ACOstyle,"::lineHaco-",lineHaco)
});
})
let TGTACO= document.getElementById(AcoID);
acor2.forEach(function(ele,i){
ele.addEventListener("click", function(event) {
AcoID=ele.getAttribute('id')
console.log("acor2",AcoID)
acoX2=i
console.log("acor2i",i)
AcoID=ele.getAttribute('id')+"bd";
acor2.forEach( elex =>{
if(ele!=elex){
AcoID=elex.getAttribute('id')+"bd";
TGTACO= document.getElementById(AcoID);
TGTACO.classList.add("acor2OFF");
console.log("OFF.",TGTACO)
}else{
AcoID=ele.getAttribute('id')+"bd";
TGTACO= document.getElementById(AcoID);
TGTACO.classList.toggle("acor2OFF");
}
Saco()
});
});
});
function Saco(){
acor2BD.forEach(function( ele,i){
var heightACO=aryAco[i];
var cls= ele.classList.contains('acor2OFF')
console.log("cls",cls);
if(cls!=true){
ele.style.height = heightACO + "px";
acor2[i].innerText="[close]"
console.log("OPEN:Ze-No Acordiron:heightACO=",heightACO);
}else{
ele.style.height =0;
acor2[i].innerText="[open]"
console.log("Close:Ze-No Acordiron:",ele.style.height);
}
console.log("Click.",TGTACO)
});
};
まとめ
アコーディオンメニューの作り方と、実装について紹介しました。お役に立てれば幸いです。
目次-Index-
