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

よくあるやつです

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

HTML

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

CSS

.accordion {
    width: 300px;
    border: solid 1px #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: solid 1px #000;
}
.accordionIcon .close::before {
    content:"";
    position: absolute;
    width: 100%;
    top: 50%;
    border-top: solid 1px #000;
}
.accordionIcon .close::after {
    content:"";
    position: absolute;
    height: 100%;
    right: 50%;
    border-right: solid 1px #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')
});