[JQUERY] 아코디언 슬라이드 메뉴 만들기

오늘은 클릭하면 펼쳐지고 한번더 클릭하면 접히는 아코디언방식의 제이쿼리를

소개해 드리고자 합니다.

굳이 ul,li태그로 사용하는것이 아니라 div로

아주 쉽고 간단하여 여러군데에서 유용하게 쓰일것 같네요^^

바로 소스나갑니다!

우선 head부분에 jQuery를 선언해줍니다.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

다음으로 html소스입니다.

<div class="accordion_banner">

    <div class="accordion_title">메뉴 1번</div>

    <div class="accordion_sub">1번에대한 내용입니다.</div>

    <div class="accordion_title">메뉴 2번</div>

    <div class="accordion_sub">2번에대한 내용입니다.</div>

</div>

 

다음으로 script 소스입니다.

<script type="text/javascript">

    $(document).ready(function() {

        $(".accordion_banner .accordion_title").click(function() {

            if($(this).next("div").is(":visible")){

            $(this).next("div").slideUp("fast");

            } else {

                $(".accordion_banner .accordion_sub").slideUp("fast");

                $(this).next("div").slideToggle("fast");

            }

        });

    });

</script>

 

css없이 적용시켜보아도 잘 될겁니다.

처음에 내용이 접혀있는것을 위해 css에 필수로

.accordion_sub { display: none; }

를 삽입하셔야합니다.

스크립트소스중 "fast"부분을 "slow"로 바꿔주시면 느리게 펼쳐지고 접히게 하실 수 있습니다.