아코디언 기능 이제는 details로~!

🔹 details 태그란?

details는 사용자가 클릭해서 열고 닫을 수 있는 토글 가능한 콘텐츠 박스를 만들 때 사용
자주 사용하는 경우는 FAQ 섹션이나, 추가 정보를 숨겨뒀다가 필요할 때 보여줄 때 사용
기본적으로 닫혀 있고, 사용자가 제목 부분을 클릭하면 내용이 펼쳐지는 구조다.

<details>
<summary>더 보기</summary> // 제목
<p>이 안에는 숨겨진 내용이 들어 있어요.</p> // 숨겨짐
</details>

"더 보기"라는 텍스트만 보이고, 클릭하면

태그 안의 내용이 펼쳐져 보인다.

🔸 주요 특징

summary 태그는 details 안에 있어야 하고, 요약(제목) 역할을 한다.

summary를 클릭하면 펼쳐지거나 접히게 됨.

CSS로 스타일링도 가능하고, open 속성을 주면 기본적으로 펼쳐진 상태로 시작 가능하다.

html

	<section name="accordion" >
       <details>
           <summary>첫 번째</summary>
           <p>첫 번째 내용입니다. 원하는 내용</p>
       </details>

       <details>
           <summary>두 번째</summary>
           <p>두 번째 내용입니다. 원하는 정보</p>
       </details>
   </section>

css

  body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f4f4f4;
    padding: 40px;
    }

details {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: .5rem;
    margin-bottom: 10px;
    transition: box-shadow 0.3s;
    position: relative;
}

details[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

  summary {
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding: 12px 40px 12px 20px;
  display: block;
  list-style-type: none;
  }


details p {
    margin: 0;
    padding: 15px 20px 20px;
    color: #444;
    line-height: 1.6;

}
summary::marker {
    display: none;
}

summary::-webkit-details-marker {
display: none; /* Chrome, Safari 등 */
}

/* 화살표 아이콘 */
summary::after {
    content: '▶';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}
  

까지만 해도

이렇게만 넣어줘도 되지만
이러면 클릭시 여닫히지만 해당제목 클릭시 다른제목도 열려있다.
이걸 하나만 열리게 하려면 쉽게 jquery를 사용하면 된다.

jq

$(document).ready(function () {
    $("details > summary").on("click", function () {
        const clicked = $(this).parent();
        setTimeout(function () {
        $("details").not(clicked).removeAttr("open");
        }, 1);
    });
});

완성

그럼 다른 제목 클릭시 보던 제목은 닫히고 클릭한 제목만 열린다.

wow 이제 드롭다운은 굳이 js, jq 를 안써도 된다는 말씀 ㅎㅎ

사실 굳이 setTimeout 안해도 되지만 그래도 에니메이션이 있는거와 없는건 차이가 크니까 ㅎㅎ