[jQuery] 펼치기 접기

html 

<span id="sp_on"><a href="javascript:void(0);">펼치기</a></span>
<span id="sp_off"><a href="javascript:void(0);">접기</a></span>

 

javascript

  $(document).ready(function() {
    
   // div hide
   $("#div아이디").hide();
   // 접기 버튼 hide
   $("span[id=sp_off]").hide();
        
    //펼치기 span 클릭 시 
	$("span[id=sp_on]").click(function() {
		var idx = $("span[id=sp_on]").index(this);
		$(this).hide();
		$("span[id=sp_off]:eq("+idx+")").show();
		$("#div아이디").show();
	});

	//접기 span 클릭 시 
	$("span[id=sp_off]").click(function() {
		var idx = $("span[id=sp_off]").index(this);
		$("span[id=sp_on]:eq("+idx+")").show();
		$("#div아이디").hide();
		$("span[id=sp_off]:eq("+idx+")").hide();
	});
		  
 });