HTML, CSS 및 JavaScript로 접근 가능한 아코디언 만들기

개발 및 디자인에서 아코디언은 수직으로 쌓인 헤더와 숨겨진 내부 콘텐츠로 구성된 그래픽 제어 요소입니다. 클릭하면 헤더의 이전에 축소/숨겨진 콘텐츠 상자가 확장되어 해당 콘텐츠가 표시됩니다. 종종 텍스트, 이미지 또는 기타 그룹화된 정보.

질문이 헤더에 표시되고 해당 질문에 대한 답변이 콘텐츠 상자에 숨겨져 있는 FAQ 페이지에서 아코디언을 보았거나 사용했을 것입니다.

아코디언은 정보가 많은 웹 및 애플리케이션 페이지에서 사용자 경험을 향상시키는 데 도움이 될 수 있습니다. 이를 통해 개발자는 모든 정보를 한 페이지에 그룹화할 수 있지만 더 높은 수준의 헤더/제목만 표시할 수 있습니다. 그러면 사용자는 세부 사항에 압도되지 않고 모든 제목을 한 눈에 볼 수 있습니다. 관심 있는 헤더/제목을 더 쉽게 찾고 클릭할 수 있으며 콘텐츠의 더 자세한 내용에 액세스할 수 있습니다.

웹사이트나 앱에 자동으로 마법처럼 아코디언을 추가하는 수많은 위젯, 플러그인 및 기타 코드 조각이 있습니다. 그러나 HTML, CSS 및 JavaScript만으로 간단한 아코디언을 만들 수도 있습니다.

아코디언 HTML

<ul id="accordion">
  <li>
    <button aria-controls="content-1" aria-expanded="false" id="accordion-control-1">FAQ 1</button>
    <div class="acc-item-content" aria-hidden="true" id="content-1">
      <p>Answer 1!</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-2" aria-expanded="false" id="accordion-control-2">FAQ 2</button>
    <div class="acc-item-content" aria-hidden="true" id="content-2">
      <p>Answer 2</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-3" aria-expanded="false" id="accordion-control-3">FAQ 3</button>
    <div class="acc-item-content" aria-hidden="true" id="content-3">
      <p>Answer 3</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-4" aria-expanded="false" id="accordion-control-4">FAQ 4 </button>
    <div class="acc-item-content" aria-hidden="true" id="content-4">
      <p>Answer 4</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-5" aria-expanded="false" id="accordion-control-5">FAQ 5</button>
    <div class="acc-item-content" aria-hidden="true" id="content-5">
      <p>Answer 5</p>
    </div>
  </li>
</ul>

HTML의 경우 전체 아코디언이 정렬되지 않은 목록에 보관됩니다. 각 목록 항목에는 내부 콘텐츠가 있는 div와 div의 가시성을 토글하는 버튼이 있습니다. 아코디언을 더 쉽게 액세스할 수 있도록 하기 위해 aria-expanded 및 aria-hidden 속성과 aria-controls div의 ID에 해당하는 버튼에 acc-item-content 속성이 있습니다. 이러한 속성은 스크린 리더를 사용하는 사용자가 우리의 아코디언을 이해하는 데 도움이 되며 버튼을 클릭할 때 무엇이 ​​표시되고 표시되지 않습니다.

또한 단락 태그에 내 텍스트가 있습니다. 이는 콘텐츠 div에 문장이 몇 개 이상 있는 경우 도움이 됩니다.

각 목록 항목과 해당 자식 요소를 동적으로 생성하기 위해 어딘가에서 루프를 사용하고 있기를 바랍니다.

아코디언 CSS

ul {
  list-style: none;
}

#accordion button:focus {
  border-radius: 0px;
  outline: none;
}
#accordion button {
  outline: none;
  background-color: DarkSeaGreen;
  padding: 10px;
  border: none;
  border-bottom: 1px solid darkslategrey;
  color: white;
  width: 100%;
  text-align: left;
  font-size: 16px;
  border-radius: 0px;
}
#accordion li {
  border: 1px solid DarkSlateGray;
  border-bottom: none;
}
.acc-item:last-child {
  border-bottom: 1px solid DarkSlateGray;
}
#accordion button::after {
  content: "\002B";
  font-weight: 900;
  font-size: 22px;
  float: right;
}

#accordion {
  width: 80%;
  max-width: 800px;
  min-width: 275px;
  margin: auto;
}

대부분의 CSS는 ... 스타일을 위한 것입니다. 배경색, 테두리 및 유사 콘텐츠를 추가하여 이것이 아코디언임을 시각적으로 나타내고 더 보려면 클릭해야 함을 나타냅니다.

기술적으로 필요한 유일한 규칙 집합은 다음과 같습니다.

.acc-item-content {
  padding: 0px 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

콘텐츠 div의 높이를 0으로 설정합니다(보기에서 숨김). 최대 높이 전환 스타일과 속도를 제공합니다. 이것은 버튼을 클릭할 때 div의 최대 높이 값을 변경하는 JavaScript에 도달할 때 유용할 것입니다.

아코디언 자바스크립트

window.addEventListener("DOMContentLoaded", (event) => {
  let buttons = document.querySelectorAll("#accordion button");
  buttons.forEach((button) => {
    let content = button.nextElementSibling;
    button.addEventListener("click", (event) => {
      if (button.classList.contains("active")) {
        button.classList.remove("active");
        button.setAttribute("aria-expanded", false);
        content.style.maxHeight = null;
        content.setAttribute("aria-hidden", true);
      } else {
        button.classList.add("active");
        button.setAttribute("aria-expanded", true);
        content.style.maxHeight = content.scrollHeight + "px";
        content.setAttribute("aria-hidden", false);
      }
    });
  });
});

의사 코드에서:

When all the DOM content is loaded...

  Collect all the buttons that are child elements of the element 
  with the id #accordion...

  Loop through each of these buttons...
     Grab the button's sibling element and save it in a variable 
     called content AND

     Add an event listener to each button, so that when the 
     button is clicked...

       If the button has the class active...
           Remove "active" from its class list AND

           Set its aria-expanded attribute to false AND

           Set the content variable's max-height value to null AND

           Set the content variable's aria-hidden attribute to true.

       Otherwise, if the button doesn't have the class active...
            Add "active" to its class list AND

           Set its aria-expanded attribute to true AND

           Set the content variable's max-height value even 
           to the value of the content variable's scroll height 
           (the height of an element's content) AND

           Set the content variable's aria-hidden attribute to false.

HTML, CSS 및 바닐라 JavaScript만으로 만든 접근 가능하고 간단한 아코디언이 그것입니다!