최종 수정일 :
(1년 전)
종종 이 더 보기 / 접기를 위해 자바스크립트(특히 jQuery)를 이용하는 케이스가 꽤 많습니다.
하지만 화려한 효과 없이 이를 구현하는 건 HTML과 CSS만으로 충분합니다.
HTML
<details> <summary>Click me</summary> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia eum fugiat, dignissimos exercitationem, dicta quidem iste quia voluptatum iusto vel, eius maiores distinctio cupiditate optio laborum natus architecto corporis consectetur. Officiis labore hic aperiam modi incidunt nostrum enim necessitatibus commodi sed numquam voluptate dignissimos quidem molestias at, non amet expedita fuga rerum. Sequi ad velit magnam sapiente culpa unde iure iusto! Eveniet ducimus blanditiis veritatis ipsam mollitia distinctio provident ad eaque deleniti ipsa nemo, placeat sequi sunt et accusantium veniam ut, voluptatum numquam perspiciatis fugiat ea, adipisci ab! Tempora sed eveniet alias ex pariatur sequi eum similique accusantium reprehenderit sunt! </div></details>
아마 대부분 깊이 살펴보지 않았을 HTML 태그 중 details 태그를 이용해 이를 구현할 수 있습니다.
details 태그 내부에 summary 태그를 추가하면 summary 태그만 표시되고, summary를 클릭해야 details 내부의 나머지 내용이 표시됩니다.
이때 details 태그에 open이란 속성이 토글됩니다.
CSS
details { margin-bottom: 1rem;}
details > summary { background: rgba(150, 255, 150); padding: 1rem; outline: 0; border-radius: 5px; cursor: pointer; transition: background 0.5s;}
details > summary::-webkit-details-marker { background: url(https://marshall-storage.tistory.com/attachment/cfile29.uf@993E16335F785C0037CB43.svg) no-repeat center; background-size: contain; color: transparent; transform: rotate3d(0, 0, 1, 90deg); transition: transform 0.25s;}
details[open] > summary::-webkit-details-marker { transform: rotate3d(0, 0, 1, 180deg);}
details[open] > summary { background: rgba(100, 255, 100);}
details[open] > summary ~ * { animation: reveal 0.5s;}
@keyframes reveal { from { opacity: 0; transform: translate3d(0, -10px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }}
summary 태그에 표시되는 삼각형은 summary::-webkit-details-marker 혹은 summary::marker로 수정하실 수 있습니다.
반드시 두 개에 대한 스타일은 아래와 같이 따로 작성해주셔야 합니다.
details > summary::marker { /* styles */}
details > summary::-webkit-details-marker { /* styles */}
details 내부의 요소가 표시될 땐 animation을 추가했습니다.
opacity와 transform을 직접 추가하고 transition을 추가해도, display: block과 display: none을 토글하는 것처럼 transition이 작동하지 않으니, 반드시 animation을 추가하셔야 합니다.
