더보기 / 접기 버튼 구현하기

Alchemist·2025년 9월 3일

JavaScript

목록 보기

5/5

피드나 리뷰처럼 텍스트가 길어질 수 있는 영역은 보통 처음엔 일부만 보여주고, 나머지는 더 보기 버튼으로 펼치는 방식을 많이 씁니다.
이번에는 이 기능을 조금 더 범용적으로 만들어서 두 가지 케이스를 모두 지원하도록 구현했습니다.

1. 더보기 ↔ 접기 토글 가능
2. 더보기만 가능 (한 번 펼치면 버튼이 사라짐)

구현 아이디어

data-clamp-text : 말줄임을 적용할 텍스트 요소
data-clamp-btn : 더보기/접기 버튼
data-collapsible : 접기 허용 여부 (기본값은 true, "false"면 더보기만 가능)
data-lines : 기준 줄 수 (예: data-lines="2" → 두 줄까지만 보임)

스크립트는 텍스트 높이를 계산해서 지정한 줄 수를 넘으면 자동으로 버튼을 붙이고, 버튼 클릭 시 접거나 펼치는 동작을 합니다.
특히 data-collapsible="false"를 주면 더보기 클릭 후 버튼이 사라지게 동작합니다.

핵심 코드

btn.onclick = () => {
    const isExpanded = text.classList.contains('is-expanded');

    if (isExpanded) {
        // 접기
        if (!collapsible) return; // 접기 불가면 아무 동작 안 함
        applyVisualClamp(text, lines, false);

        if (hasText) {
            btn.textContent = MORE_LABEL;
        } else {
            btn.classList.remove('active');
        }
    } else {
        // 더 보기
        applyVisualClamp(text, lines, true);

        if (hasText) {
            btn.textContent = collapsible ? LESS_LABEL : MORE_LABEL;
        } else {
            btn.classList.add('active');
        }

        // 더보기만 가능할 경우 버튼 사라짐
        if (!collapsible) {
            btn.hidden = true;
        }
    }
};