Textboxにアコーディオンメニュー

https://gyazo.com/180b80fe57c28b8aa39e480120418ece

ref.

ref.では0にしていたが、20pxまで縮めることにした。クリックする領域を残すため。

これは本体に実装してもいいかもしれない。

code:script.js

function accordopen(elm){

const nextelm = elm.parentElement;

nextelm.style.height = "auto"; //いったんautoに

let h = nextelm.offsetHeight; //autoにした要素から高さを取得

nextelm.style.height = h + 'px';

nextelm.animate([ //高さ0から取得した高さまでのアニメーション

{ height: 20 + 'px' },

{ height: h + 'px' }

], {

duration: 300, //アニメーションの時間（ms）

});

}

function accordclose(elm){

const nextelm = elm.parentElement;

let h = nextelm.offsetHeight; //autoにした要素から高さを取得

nextelm.style.height = h + 'px';

nextelm.animate([ //高さ0から取得した高さまでのアニメーション

{ height: h + 'px' },

{ height: 20 + 'px' }

], {

duration: 300, //アニメーションの時間（ms）

});

nextelm.style.height = "20px";

}

//アコーディオン機能の付与

const accod = document.querySelectorAll(".accordion");

accod.forEach(elm =>{

elm.addEventListener('click',function(){

this.parentNode.classList.toggle('active');

if(this.parentNode.classList.contains('active')){

accordopen(this);

}else{

accordclose(this);

}

})

})