쇼핑몰 상세보기화면 더보기/감추기 구현

오픈마켓 상품 페이지를 보면 기본적으로 더보기 버튼으로 긴 상세보기 내용을 짧게 보여주고 있습니다.

긴 상세보기 내용을 모두 표시하는데 걸리는 시간을 줄여주고, 긴 상세보기 내용을 모두 볼 필요가 없는 방문객들에게 짧은 스크롤 동작을 제공하기 때문에 많은 쇼핑몰에서 표준 기능으로 채택을 하고 있습니다.

쇼핑몰 외에 모바일 웹페이지들은 기본적으로 가로가 좁기 때문에 같은 컨텐츠를 표시해도 세로로 길게 스크롤 해야 하는 경우가 많아, 모바일 UI를 고려할 때는 긴 컨텐츠 페이지에는 더보기 버튼을 추가하는 것이 추세입니다.

표시되는 실제 컨텐츠 내용은 <div> "content" 클래스 안에 표시됩니다.

"detailinfo" 클래스를 가진 외곽을 감싼 <div>가 표시되는 높이를 제어하는 기능을 합니다.

이벤트 리스너를 등록해 더보기 버튼을 클릭하면 기본 300px 높이가 600px 로 늘어나고, 한번 더 누르면 전체 높이로 보이는 방식으로 동작합니다.

기본 HTML과 CSS는 다음과 같습니다.

<style>    .showstep1{        max-height: 300px;        overflow: hidden;    }    .showstep2{        max-height: 600px;        overflow: hidden;    }    .content{        height: 1000px;        background-color: #a00;    }    .hide{        display: none;    }</style>            <div class="detailinfo showstep1">    <div class="content"><!-- "실제 컨텐츠 표시 영역" --></div></div><a href="#" class="btn_open">더보기</a><a href="#" class="btn_close hide">감추기</a>

더보기 이벤트 리스너 등록

더보기는 2단계로 늘어납니다.

더보기 버튼을 한번 누르면 600px로 늘어나고, 한번 더 누르면 전체 컨텐츠가 모두 보입니다.

실제 컨텐츠 전체 높이를 확인해서 늘어나는 높이보다 더 작으면 전체보기 상태로 전환하는 조건 체크도 있어야 합니다.

document.addEventListener('DOMContentLoaded', function(){ //DOM 생성 후 이벤트 리스너 등록    //더보기 버튼 이벤트 리스너    document.querySelector('.btn_open').addEventListener('click', function(e){                let classList = document.querySelector('.detailinfo').classList; // 더보기 프레임의 클래스 정보 얻기        let contentHeight = document.querySelector('.detailinfo > .content').offsetHeight; //컨텐츠 높이 얻기
        // 2단계이면 전체보기로        if(classList.contains('showstep2')){            classList.remove('showstep2');        }        // 1단계이면 2단계로        if(classList.contains('showstep1')){            classList.remove('showstep1');            if(contentHeight > 600){                classList.add('showstep2');            }else{                document.querySelector('.btn_open').classList.add('hide');            }        }        //전체보기시 더보기 버튼 감추기 & 감추기 버튼 표시        if(!classList.contains('showstep1') && !classList.contains('showstep2')){            e.target.classList.add('hide');            document.querySelector('.btn_close').classList.remove('hide');                    }            });});

감추기 버튼 이벤트 리스너 추가

전체 컨텐츠가 펼쳐진 상태가 되면 "감추기" 버튼이 나타되고 초기 300px 높이로 전환할 수 있도록 처리하는 이벤트 리스너를 추가합니다.

// 감추기 버튼 이벤트 리스너document.querySelector('.btn_close').addEventListener('click', function(e){    e.target.classList.add('hide');    document.querySelector('.btn_open').classList.remove('hide'); // 더보기 버튼 감춤    document.querySelector('.detailinfo').classList.add('showstep1'); // 초기 감춤 상태로 복귀});

초기 설정 이벤트 리스너 추가

예제에서는 초기 높이값을 300px를 사용합니다.

실제 표시되는 전체 컨텐츠 높이가 300px 보다 작으면, 더보기 버튼은 필요가 없습니다.

따라서, 실제 컨텐츠 전체 높이를 체크해서 더보기 버튼을 감출지를 결정하는 초기 코드를 추가해야 합니다.

아울러 컨텐츠 높이고, 실제 컨텐츠 높이에 맞춰 표시되도록 초기 300px로 설정해주는 클래스도 제거를 해줍니다.

//컨텐츠 로딩 완료 후 높이 기준으로 클래스 재처리window.addEventListener('load', function(){    let contentHeight = document.querySelector('.detailinfo > .content').offsetHeight; //컨텐츠 높이 얻기    if(contentHeight <= 300){        document.querySelector('.detailinfo').classList.remove('showstep1'); // 초기값보다 작으면 전체 컨텐츠 표시        document.querySelector('.btn_open').classList.add('hide'); // 버튼 감춤    }});

!주의할 점

이벤트 리스너를 등록할 때, 대부분의 경우 document.addEventLIstener(), window.addEventListener() 두가지 모두를 사용할 수 있습니다.

단, 이벤트 타입에 따라서는 document.addEventListener() 로 등록하면 이벤트가 리스너가 실행되지 않습니다.

모든 컨텐츠(리소스)가 로딩된 후 발생하는 "load" 이벤트는 document.addEventListener() 로는 발생하지 않습니다. 반드시 window.addEventListener() 로 등록해야 합니다. "load" 이벤트는 window, 또는 리소스 태그(<img> 같은)  태그(엘리먼트) 에 등록해야 이벤트가 발생합니다.