十字アイコンのアコーディオン

よくあるやつです

See the Pen 十字アイコンのアコーディオン by Yuya Okada (@okdyy75) on CodePen.

HTML

<divclass="accordion"><divclass="accordionHead"><div>アコーディオン</div><divclass="accordionIcon"><spanclass="close"></span></div></div><divclass="accordionBody"><divclass="close">アコーディオンの中身
        </div></div></div>

CSS

.accordion{width:300px;border:solid1px#000;margin:10px;}.accordionHead{display:flex;position:relative;margin:10px;}.accordionBody{display:flex;position:relative;margin:10px;}.accordionIcon{width:20px;height:20px;position:absolute;right:10px;}.accordionIcon.open::before{content:"";position:absolute;width:100%;top:50%;border-top:solid1px#000;}.accordionIcon.close::before{content:"";position:absolute;width:100%;top:50%;border-top:solid1px#000;}.accordionIcon.close::after{content:"";position:absolute;height:100%;right:50%;border-right:solid1px#000;}.accordionBody.open{display:block;}.accordionBody.close{display:none;}

Javascript

document.querySelector('.accordionIcon').addEventListener('click',ev=>{document.querySelector('.accordionIcon span').classList.toggle('open')document.querySelector('.accordionIcon span').classList.toggle('close')document.querySelector('.accordionBody div').classList.toggle('open')document.querySelector('.accordionBody div').classList.toggle('close')});