아코디언 메뉴(게시판)

<div class="heading">
    <!-- 제목으로 보일부분 -->
</div>
<div class="content">
    <!-- 클릭시 보여질 부분 -->
</div>

간단한 html. 안쪽에 구현한다.

class를 기준으로 한다.

1 2 3 4 5 6 7 8 9

$(document).ready(function() {   $(".content").hide();   //content 클래스를 가진 div를 표시/숨김(토글)   $(".heading").click(function()   {     $(this).next(".content").slideToggle(500);     $("i", this).toggleClass("fa-chevron-down fa-chevron-up");   }); }); Colored by Color Scripter

cs

상위가 클릭하고 그 아래쪽으로 나오는 부분을 toggle 로 보여지게 하는 부분.

i 는 font awsome의 아이콘. down 아이콘이 기본 클릭시 up. 이다

toggle의 경우. jquery 자체 세션으로 이전 display를 기억한다.

즉 이전 display가 inline 이면 다른 값을 주지 않으면 inline 으로 돌아간다고..

이런느낌..