JS 없이 더보기 / 접기 구현하기

Tips · 4 ·

종종 이 더 보기 / 접기를 위해 자바스크립트(특히 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을 추가하셔야 합니다.

profile

이메일은 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
    카카오페이 qr코드 모바일이시라면 클릭