기본 HTML: 아코디언

JQuery가 왕이던 10년 전으로 마음을 돌린다면 유비쿼터스JQuery UI가 사이트에 갑자기 더 많은 기능과 요소가 있다는 것을 기억할 것입니다. 그 요소 중 하나는 겸손accordion이었습니다.



그러나 그것은 10년 전이었고 우리는 더 이상 무거운 작업을 수행하기 위해 자바스크립트 라이브러리가 필요하지 않습니다. 플랫폼은 먼 길을 왔습니다. 그래서 오늘 우리는 <details> 와 <summary> 를 살펴볼 것입니다. 이것은 현대의 아코디언에 해당합니다. 지원은 실제로 단 하나의 주목할만한 홀드 아웃으로 훌륭합니다.

세부 요소

항상 그렇듯이 Mozilla의 <details> 페이지에서 무엇을 말해야 하는지 살펴보는 것으로 시작하겠습니다.

The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget.

이것을 읽으면 <details> 요소에 open 및 closed 두 가지 상태가 있고 첫 번째 자식으로 <summary> 요소가 필요하지만 필요하지 않다는 것을 알 수 있습니다.

요약 요소

이제 <summary> 요소에 대한 설명을 볼 수 있습니다.

The HTML Disclosure Summary element (<summary>) element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

요약 텍스트를 클릭하면 세부 정보가 전환되는 것 외에는 두 요소가 매우 밀접하게 연결되어 있기 때문에 여기에서 더 많은 추가 내용을 배우지는 않습니다.

그것을 사용

사용에 대해 살펴보자.

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

표준 형식에서 가장 보기 좋은 요소는 아니지만 확실히 제 역할을 합니다.

스타일링

나는 JQuery UI의 아코디언에 대한 후퇴로 이 게시물을 시작했기 때문에 <details> 블록을 비슷하게 보이도록 스타일을 지정하는 것이 적합해 보입니다.

details {
  overflow: hidden;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  padding: .5em .5em .5em .7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {      
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  border: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details main {
  padding: 1em 2.2em;
}

<details>
  <summary>Summary</summary>
  <main>Text to hide away.</main>
</details>

그러나 몇 가지 주의 사항이 있습니다.

Unfortunately, at this time there's no built-in way to animate the transition between open and closed.

또한 아코디언은 몇 가지 다른 작업을 수행했습니다. 한 번에 하나의 항목만 열 수 있었고 JS로 해결할 수 있는 제한 사항이었으며 키보드 탐색은 탭 이동이 아닌 라디오 그룹에 더 가깝습니다.

마무리

그래서 우리는 또 다른 기본 HTML 요소와 더 적은 JavaScript를 사용할 수 있는 또 다른 기회를 갖게 되었습니다.

항상 그렇듯이 내가 말한 내용에 동의하지 않는 경우 그 이유를 알려주십시오. 다른 의견을 듣고 싶습니다. 또한 제가 살펴봐야 할 다른 요소를 자유롭게 제안해 주세요.

읽어주셔서 감사합니다❤❤🦄❤🦄❤❤