아코디언메뉴를 만들어달라고 해서 간단하게 생각하고 OK했는데.. 인터넷상에 제대로 된 샘플이 많이 없더라구요 한 여덟가지 테스트하다가 그나마 하나 건져서 수정하고 수정해서 완성하였습니다. 구성은 세가지에요. 스타일시트로 기초 모양잡기. Jquery로 클릭시 이벤트. 스타일시트----------------------------------- 제이쿼리 -------------------------------------- $(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-------------------------------------