HTMLとCSSだけでアコーディオンが作れますが、何かとjsで作った方が簡単で挙動も制御しやすく、何よりデザインの幅も広がります。
今回は、SANGOのテーマに合いそうなjsのアコーディオンのデザインについてご紹介します。
レスポンシブのjsアコーディオン
5段のレスポンシブ アコーディオンです。
開閉時にfontawesomeの三角が反転し、コンテンツが開いているactive時に色味がつくような仕様で、サンプルはsango標準のプライマリカラーをCSSで設定しているので、サイトに合わせて色を変更して使用しましょう。
コピペ用のソース一式
上記サンプルのHTML+CSS+JSのソースです。
jsは <body>〜〜</body> の中に書いて設置しましょう。
コードを表示する
<div class="wrapp_aco">
<div class="accrodion_sango">
<button class="butt_sango butt_even">その1 <i class="fas fa-caret-up"></i> </button>
<div class="info">
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
</div>
</div>
<div class="accrodion_sango">
<button class="butt_sango butt_odd">その2 <i class="fas fa-caret-up"></i></button>
<div class="info">
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
</div>
</div>
<div class="accrodion_sango">
<button class="butt_sango butt_even">その3 <i class="fas fa-caret-up"></i></button>
<div class="info">
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
</div>
</div>
<div class="accrodion_sango">
<button class="butt_sango butt_odd">その4 <i class="fas fa-caret-up"></i></button>
<div class="info">
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
</div>
</div>
<div class="accrodion_sango">
<button class="butt_sango butt_even">その5 <i class="fas fa-caret-up"></i></button>
<div class="info">
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
<a href="#" class="info__link">test</a>
</div>
</div>
</div>
/*--------------------------------------
jsのアコーディオン
--------------------------------------*/
.wrapp_aco {
display: flex;
flex-direction: column;
max-width: 800px;
width: 100%;
margin: 0 auto;
padding-top: 40px;
}
.wrapp_aco a {
text-decoration: none;
color: #636363;
font-size: 0.8em;
padding: 10px;
}
.accrodion_sango {
margin-bottom: 4px;
}
.butt_sango {
position: relative;
width: 100%;
border: none;
border-radius: 2px;
padding: 18px;
text-align: left;
font-family: 'Fira Sans', sans-serif;
font-size: 1em;
font-weight: bold;
letter-spacing: 1.5px;
padding-left: 35px;
transition: all 0.5s;
}
.butt_sango i {
position: absolute;
right: 30px;
}
.butt-carret-down {
transform: rotate(180deg);
}
.butt_even {
background-color: #696666;
color: #fff;
}
.fa-caret-up {
margin-top: 4px;
}
.fas {
transition: all 0.5s;
}
.butt_odd {
background-color: #e7e7e7;
color: #4f4f4f;
}
.butt_active {
background-color: #4f96f6;
color: #fff;
}
.info {
display: flex;
flex-direction: column;
background-color: #e7e7e7;
padding-left: 30px;
padding-top: 35px;
border-radius: 2px;
margin-top: -35px;
max-height: 0;
overflow: hidden;
transition: all 0.5s;
}
function accordeon () {
let buttns = document.querySelectorAll('.butt_sango')
let infoBlock = document.querySelectorAll('.info')
Array.from(buttns).forEach(el=>el.addEventListener('click' , function test(e){
this.classList.toggle('butt_active');
const btnConst = this;
const icon = this.querySelector('.fas');
let infoBlock = this.nextElementSibling;
if (infoBlock.style.maxHeight) {
infoBlock.style.maxHeight = null;
} else {
infoBlock.style.maxHeight = infoBlock.scrollHeight + "px";
}
if(this.classList.contains('butt_active')) {
icon.classList.add('butt-carret-down')
} else {
icon.classList.remove('butt-carret-down')
}
Array.from(buttns, function(infoCheck){
if(btnConst != infoCheck){
infoCheck.classList.remove('butt_active');
infoCheck.nextElementSibling.style.maxHeight = null;
infoCheck.querySelector('.fas').classList.remove('butt-carret-down');
}
})
}))
}
accordeon()