슬라이드 및 클릭

Question

내가 JS 사용하여 열고 닫습니다 사업부를 (위/아래 슬라이드) 다음 코드를 사용하고

에 사업부를 밀어

나는 버튼에 연결된 이벤트 아래로 슬라이드 및 슬라이드 업 이벤트를 텍스트를 닫으려고 sttached.

내가 원하는 것은 버튼 onclick을 열고 onclick 다시 슬라이드 요소를 닫습니다.

<span class="grabPromo">Open</span> 

및 영역 아래 슬라이드

제가

<a class="closeSlide">Close</a> 

알

어떤 도움을 가지고

여기 HTML은 JS

// slide down effect 

$(function(){ 
$('.grabPromo').click(function(){ 
var parent = $(this).parents('.promo'); 
$(parent).find('.slideDown').slideDown(); 
}); 
$('.closeSlide').click(function(){ 
var parent = $(this).parents('.promo'); 
$(parent).find('.slideDown').slideUp(); 
}); 
}); 

이다.

이상적으로는 아래쪽 방향 버튼을 가리키는 화살표와 위 방향 화살표를 사용하여 동일한 버튼을 위로 움직여야합니다. 그리고 가까운 관계를 완전히 버리십시오.

도움을 주시면 감사하겠습니다. 건배

Answer 1

이 시도. 여러 항목을 허용하므로 ID별로 다릅니다. AJAX를 통해로드 된 모든 컨텐츠도 지원합니다. jsfiddle is here

<div class='toggle_parent'> 
    <div class='toggleHolder'> 
    <span class='toggler'>Open</span> 
    <span class-'toggler' style='display:none;'>Close</span> 
    </div> 
    <div class='toggled_content' style='display:none;'> 
     My Content 
    </div> 
</div> 

및

$('.toggler').live('click',function(){ 
    $(this).parent().children().toggle(); //swaps the display:none between the two spans 
    $(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action 

}); 

Answer 2

<div id="content"> 
bla bla bla bla bla bla bla bla blabla bla blabla bla bla 
</div> 
<input type="button" id="myButton" value="Slide down ↓"/> 

$("#myButton").toggle(function(){ 
    $("#content").slideDown(); 
    $(this).val("Slide up ↑"); 
},function(){ 
    $("#content").slideUp(); 
    $(this).val("Slide down ↓") 
}); 

온라인 데모 : http://jsfiddle.net/amosrivera/AYWku/

데모 span과 : http://jsfiddle.net/amosrivera/AYWku/1/

Answer 3

당신은 단지 클릭 기능에 slideToggle()를 사용할 수 있습니다

$('.grabPromo').click(function(e){ 
    $('.slideDown').slideToggle(); 
}); 

Here's a demo.