jQuery 클릭 펼침 메뉴 만들기 : slideToggle()

jQuery 라이브러리는 웹 페이지에서 애니메이션 효과를 주는 함수들이 많이 있습니다. 이번 시간에는 그중에서 제 생각에 제일 많이 사용하는 slideToggle()에 대해서 간편하게 사용하는 방법을 알아보겠습니다.

먼저 jQuery CDN 사용법을 확인해주세요!

jQuery CDN을 이용한 사용법

기본 사용법

jQuery CDN 연결 시켜주고, div를 안보이게 처리 한 다음, ‘펼침’ 버튼을 클릭 하면 스르륵~ 나타납니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>jQuery slideToggle()</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
    <button id="btn-click">펼침</button>
    <div id="div-box" style="display:none;margin:0;padding:0;width:100%;height:200px;background-color:green"></div>
</body>
</html>

JavaScript

$("#btn-click").click(function(){
    $("#div-box").slideToggle("fast");
})

결과보기

마무리

jQuery 라이브러리는 괜찮은 기능들이 많이 있습니다. slideToggle() 함수는 저 같은 경우 메뉴바 클릭 시 서브 메뉴가 펼쳐지게 하는 기능으로 많이 사용했지만, 여러 상황에서 커스텀이 가능하니, 여러분들도 한번 커스텀으로 사용해 보시길 바랍니다.