아코디언메뉴를 만들어달라고 해서 간단하게 생각하고 OK했는데..

인터넷상에 제대로 된 샘플이 많이 없더라구요

한 여덟가지 테스트하다가 그나마 하나 건져서 수정하고 수정해서 완성하였습니다.

구성은 세가지에요. 스타일시트로 기초 모양잡기.

Jquery로 클릭시 이벤트.

스타일시트-----------------------------------

<style>
             #accordian li{ list-style:none !important; list-style-type:none !important; margin-bottom: 10px;}
             #accordian li >h3{ cursor:pointer;}
             li > ul{ display:none; list-style:none !important; list-style-type:none !important;}
             li > ul > li{ color:#000; list-style:none !important; list-style-type:none !important;}
        li > ul > li > table{ margin-top:10px; margin-bottom:10px;}
</style>

제이쿼리 --------------------------------------

$(function(){
        $("#accordian h3").click(function(){
        
        var clickval = ($(this).attr('id'));
        // 아래부분은 열렸을때 +가 닫혔을때 -를 구현한건데.. 짜지퍼 프로그래머다보니

        // 마땅히 스마트하게 처리할 수 있는 방법이 생각이 안나 그냥 손노가다 했습니다.
        var plus1 = $("#plus1").text();
        var plus2 = $("#plus1").text();
        var plus3 = $("#plus1").text();
        var plus4 = $("#plus1").text();
        var plus5 = $("#plus1").text();
        
          if(clickval == 'acc1'){
            if($("#plus1").text() == '-'){
              $("#plus1").text(plus1.replace('-', '+'));
            }else{
              $("#plus1").text(plus1.replace('+', '-'));
            }            
            $("#plus2").text(plus2.replace('-', '+'));
            $("#plus3").text(plus3.replace('-', '+'));
            $("#plus4").text(plus4.replace('-', '+'));
            $("#plus5").text(plus5.replace('-', '+'));
          }
          
          if(clickval == 'acc2'){
            if($("#plus2").text() == '-'){
              $("#plus2").text(plus2.replace('-', '+'));
            }else{
              $("#plus2").text(plus2.replace('+', '-'));
            }  
            $("#plus1").text(plus1.replace('-', '+'));            
            $("#plus3").text(plus3.replace('-', '+'));
            $("#plus4").text(plus4.replace('-', '+'));
            $("#plus5").text(plus5.replace('-', '+'));
          }
          
          if(clickval == 'acc3'){
            if($("#plus3").text() == '-'){
              $("#plus3").text(plus3.replace('-', '+'));
            }else{
              $("#plus3").text(plus3.replace('+', '-'));
            } 
            $("#plus1").text(plus1.replace('-', '+'));
            $("#plus2").text(plus2.replace('-', '+'));            
            $("#plus4").text(plus4.replace('-', '+'));
            $("#plus5").text(plus5.replace('-', '+'));
          }
          
          if(clickval == 'acc4'){
            if($("#plus4").text() == '-'){
              $("#plus4").text(plus4.replace('-', '+'));
            }else{
              $("#plus4").text(plus4.replace('+', '-'));
            } 
            $("#plus1").text(plus1.replace('-', '+'));
            $("#plus2").text(plus2.replace('-', '+'));
            $("#plus3").text(plus3.replace('-', '+'));            
            $("#plus5").text(plus5.replace('-', '+'));
          }
          
          if(clickval == 'acc5'){
            if($("#plus5").text() == '-'){
              $("#plus5").text(plus5.replace('-', '+'));
            }else{
              $("#plus5").text(plus5.replace('+', '-'));
            } 
            $("#plus1").text(plus1.replace('-', '+'));
            $("#plus2").text(plus2.replace('-', '+'));
            $("#plus3").text(plus3.replace('-', '+'));
            $("#plus4").text(plus4.replace('-', '+'));            
          }
        
             $("#accordian ul ul").slideUp();
             if(!$(this).next().is(":visible"))
             {
                 $(this).next().slideDown();
             }
         })
     })

HTML-------------------------------------

<div id="accordian">
      <ul>
        <li>
          <h3 id="acc1">제목<span id="plus1">+</span></h3>
          요약
          <ul>
            <li>
            
               펼쳐질 실 내용
            </li>
          </ul>
        </li>

        <li>
          <h3 id="acc2">제목<span id="plus2">+</span></h3>
          요약
          <ul>
            <li>
            
               펼쳐질 실 내용
            </li>
          </ul>
        </li>

        <li>
          <h3 id="acc3">제목<span id="plus3">+</span></h3>
          요약
          <ul>
            <li>
            
               펼쳐질 실 내용
            </li>
          </ul>
        </li>

        <li>
          <h3 id="acc4">제목<span id="plus4">+</span></h3>
          요약
          <ul>
            <li>
            
               펼쳐질 실 내용
            </li>
          </ul>
        </li>

        <li>
          <h3 id="acc5">제목<span id="plus5">+</span></h3>
          요약
          <ul>
            <li>
            
               펼쳐질 실 내용
            </li>
          </ul>
        </li>

     </ul>
  </div>    

기본적인 뼈대만 공유할게요 나머지는 작업하시면서 추가하시면 될것같습니다.

오늘도 좋은하루 보내세요..