Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기



<div class="menu">menu01</div>
<ul class="accordion">
<li>list01</li>
<li>list02</li>
<li>list03</li>
</ul>
<div class="menu">menu02</div>
<ul class="accordion">
<li>list01</li>
<li>list02</li>
<li>list03</li>
</ul>


<style>
.accordion {display:none;}
.menu.on {color:red;}
</style>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
/*메뉴 아코디언*/
  $('.accordion').hide();
  $('.menu').click(function(){
$(this).toggleClass('on')
        $(this).next().slideToggle();
  });
});
</script>

댓글

이 블로그의 인기 게시물

Lottery in javascript / 자바스크립트로 경품추첨기 만들기

Quick Menu(flying menu) in jQuery / 제이쿼리로 퀵메뉴 바 만들기