detailsで1つだけ開きたい（他は閉じる）

Question

初めまして。
色々調べましたが、うまくいかないのでご教授いただければ幸いです。

キャラクター図鑑のようなものを作成しています。
サムネイルで3×n（スマホの場合）の一覧にし、クリックするとアコーディオンメニューとして詳細が見えます。
サムネイルで表示されるのがaccordion-ttlの写真と名前。
詳細がaccordion-txtの写真やone-fourの内容です。
※fourの内容はキャラによって増減します。

お伺いしたい点は、同列の1つ目を開いたまま2つ目をクリックすると詳細がかぶってしまうので、
”1つ開いたら前に開いていたものを閉じる”ようにしたいです。
detailsを使用して上記のようなことはできますでしょうか。

<div class="item">
                <details class="accordion">
                    <summary class="accordion-ttl">
                        <img src="img.jpg">
                        <h2>キャラ名</h2>
                    </summary>
                    <div class="accordion-txt">
                        <img class="pic" src="img.jpg">
                        <div class="one">
                            <p class="yomi">yomigana</p>
                            <p class="name">キャラ名</p>
                        </div>
                        <div class="two">
                            <p>Birthday ： 0月</p>
                            <p>Blood ： 0型</p>
                        </div>
                        <div class="three">
                            <div class="four">
                                <div class="question">趣味</div>
                                <div class="answer">回答</div>
                            </div>
                            <div class="four">
                                <div class="question">好きな○○</div>
                                <div class="answer">回答</div>
                            </div>
                            <div class="four">
                                <div class="question">好きな○○</div>
                                <div class="answer">回答</div>
                            </div>
                        </div>
                    </div>
                </details>
            </div>
・・・

.item {
        width: calc((100% - 1em * 2) / 3);
}
img {
        width:30vw;
        height:30vw;
        object-fit: cover;
    }

.accordion-ttl {
    list-style: none;
}

.item:nth-child(3n-2) .accordion-txt {
    margin-left: 0;
}
.item:nth-child(3n-1) .accordion-txt {
    margin: 0 calc(50% - 49vw);
}
.accordion-txt {
    background:rgba(255, 255, 255, 0.8);
    width: 98vw;
    margin: 0 calc(10% - 70vw);
    padding: 0.2em;
    padding-bottom: 2em;
    color: #020E34;
    position: relative;
}
.accordion-txt p {
    color: #020E34;
}

.pic {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius:0;
    margin: 15px 0 0 15px;
}
.one {
    margin-left: 193px;
    margin-top: 15px;
    text-align: center;
}
.name {
    font-size:2.3em;
    margin: 0;
}
.class {
    font-size: 1em;
}
.two {
    margin:3em auto;
    padding:0.2em;
    width:200px;
    background:yellow;
}
.three {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:minmax(1em,auto);
}
.four {
    display: grid;
    padding:0.4em;
    padding-top:1em;
    border-bottom: 1px solid yellow;
}


.question {
    font-size:1.1rem;
}
.answer {
    font-size:0.7rem;
    padding-left : 1em;
    padding-top: 0.5em;
}

$(function(){
    $('.wrap .item .accordion .accordion-ttl').click(function(){
        $(this).next('.accordion-txt').slideToggle();
        $(this).toggleClass("open");

        $('.wrap .item .accordion .accordion-ttl').not($(this)).next('.accordion .accordion-txt').slideUp();
        $('.wrap .item .accordion .accordion-ttl').not($(this)).removeClass("open");
    });
});

Answer 1

<details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN

上記のtoggle イベントを使ってみました。

const elems = document.querySelectorAll("details.accordion");
let openelem = null;
for(elem of elems){
  elem.addEventListener("toggle", event => {
  if (event.target.open) {
     if (openelem !== null) openelem.open = false;
     openelem = event.target;
     } else {
     if (openelem === event.target) {openelem = null}  
     }
  });
}

Comments

[mi-ko]

ご返信ありがとうございます。
お送りいただいた内容で解決しました！！
色々試してもなかなかできなかったので、助かりました。
ありがとうございます。