아코디언 더 읽기/덜 읽기 버튼을 매우 쉽게 생성하여 콘텐츠를 숨기거나 표시할 수 있는 기본 HTML5 솔루션이 있다는 것을 알고 계셨습니까? 자바스크립트 또는 CSS 없음. 방법을 알아 보려면 계속 읽으십시오.
XNUMXD덴탈의 및 HTML5 태그는 공식적으로 공개 위젯 요소하지만, 페어링 HTML5 태그는 순수 HTML 전용 아코디언.
의미 JS 또는 CSS 없음 필요합니다. 얼마나 멋진 일입니까!
다음은 간단한 요소를 보여주는 예입니다. 및 .
코드는 다음과 같습니다.
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>다음과 같이 표시됩니다.
상세 보기
이것은 콘텐츠를 숨기고 드러내는 기본 HTML5 아코디언입니다. 꽤 멋지죠?
어떻게 진행합니까? XNUMXD덴탈의 태그는 열거나 닫을 수 있는 요소의 래퍼 역할을 합니다. 사용자는 레이블을 클릭해야 합니다. 태그를 사용하여 요소를 열거나 닫습니다.
스타일과 행동은 어떻습니까?
스타일
CSS 스타일을 적용하여 표시 텍스트 상자의 모양을 사용자 정의할 수 있습니다. 아래는 탭 인터페이스 스타일을 제공합니다.
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}기본적으로 커서는 화살표처럼 표시되지만 원하는 경우 가리키는 손 대신 다음을 사용하십시오.
details {
cursor: pointer;
}행동
동작을 설정하는 것은 매우 제한적입니다. 실제로 할 수 있는 일은 단 하나입니다. 그것은 공개된 텍스트를 만드는 것입니다. 기본적으로 열기.
열린 상태에서 아코디언을 시작하려면 부울을 추가하십시오. 열 수 속성을 태그 :
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>상세 보기
이것은 콘텐츠를 숨기고 드러내는 기본 HTML5 아코디언입니다. 꽤 멋지죠?
어떤 속성을 사용할 수 있습니까?
아래 속성을 사용할 수 있습니다. 태그 :
| 속성 | 가치관 | 요약 |
|---|---|---|
| 열 수 | 열 수 | 기본값은 열려 있지 않음. |
| id | 가치 | 고유 식별자를 제공합니다. |
| 수업 | 클래스 이름 | 요소에 클래스 이름을 할당합니다. |
| 스타일 | CSS 값 | 요소에 CSS 스타일을 할당합니다. |
그래서 한계는 무엇입니까? 항상 캐치가 있지 않습니까?
Internet Explorer에 대한 지원 없음
이 HTML5 전용 아코디언은 모든 버전의 Internet Explorer에서 작동하지 않습니다. IE11을 지원해야 하는 경우 JQuery를 사용하는 다른 폴백 솔루션을 사용해야 합니다. 다른 모든 브라우저 지원 및 .
사용자 정의 애니메이션 또는 전환 없음
모양을 수정하고 스타일을 지정할 수 있지만(위에 표시된 대로) 텍스트 표시 애니메이션이나 전환을 수행할 수는 없습니다. 그렇게 하려면 다른 CSS/JSS 아코디언 솔루션이 필요합니다.
스크린 리더 및 접근성
이것은 네이티브 HTML5 그리고 그것은 *접근 가능해야** 하지만 실제 공개된 텍스트가 스크린 리더에 의해 항상 올바르게 발표되는 것은 아니라는 것이 밝혀졌습니다.
참조 :
