접혔다 펼쳐지는 토글 메뉴 만들기

한번 알아두면 굉장히 쓸 곳이 많은 코드

간단하면서도 화면이 엄청나게 깔끔해진다

 

<div class="wrap">
    <div class="list_box">
        <div class="content_area"><span>내용</span></div>
        <button type="button" class="toggle_btn">주의사항</button>
        <div class="inner_area">
            <ul>
                <li>주의사항1</li>
                <li>주의사항2</li>
                <li>주의사항3</li>
                <li>주의사항4</li>
            </ul>
        </div>
    </div>
    <div class="list_box">
        <div class="content_area"><span>내용</span></div>
        <button type="button" class="toggle_btn">주의사항</button>
        <div class="inner_area">
            <ul>
                <li>주의사항1</li>
                <li>주의사항2</li>
                <li>주의사항3</li>
                <li>주의사항4</li>
            </ul>
        </div>
    </div>
</div>

기본적인 html 레이아웃 뼈대

여기서 버튼에 on 클래스가 붙으면 숨겨져 있던 div가 display:block;으로 바뀌어서 뿅 하고 나타나는 설정이다

 

 

css는 취향껏 커스텀하되

.list_box .inner_area {
	display: none;
}

이렇게 평소에는 버튼 밑 div를 숨겨놨다가

 

.list_box .toggle_btn.on + .inner_area {
	display: block;
}

버튼에 on 클래스가 붙으면 밑에 있는 div 박스가 이렇게 바뀌도록 설정해둬야 한다

 

 

 

.list_box .toggle_btn::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	display: inline-block;
	transform: rotate(135deg);
	position: absolute;
	right: 30px;
	bottom: 27px;
}

.list_box .toggle_btn.on::after {
	transform: rotate(315deg);
	bottom: 22px;
}

그리고 이렇게 화살표를 만들어놓고

on클래스가 붙으면 화살표가 뒤집어지는 효과까지 주면 깔끔함이 2배

 

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var itemli = $('.toggle_btn');
    itemli.click(function () {
        $(this).toggleClass('on');
        itemli.not($(this)).removeClass('on');
    });
</script>

이렇게 </body>밑에 스크립트를 넣어주면

끝

 

 

See the Pen Untitled by Suu978 (@suu978) on CodePen.

이렇게 이래저래 응용하면 다양한 커스텀이 가능하ㄷㅏ..