여러 Div가있는 jQuery 토글/수직 슬라이더 효과

Question

사실 저는 jQuery를 처음 사용하고 jQuery 함수가있는 샘플 페이지를 작성하고 있습니다. 이 페이지에서는 토글 기능을 사용하고 있습니다. 의도 한 효과를 얻도록 도와주세요. 나는 그것을 얻으려고하지만 제대로 작동하지 않습니다. 적용하려는 효과는 다음과 같습니다.

1. 페이지에는 2 개의 버튼이 있습니다 (예 : Button1 및 Button2).
2. Div1과 Div2라는 두 개의 Div가 있습니다.
3. 처음에는 두 개의 Div가 숨겨져 있으며 두 개의 버튼 만 표시됩니다.
4. Button1을 클릭하면 Div1이 토글 다운되고 반대의 경우도 마찬가지입니다.
5. Div1이 열린 상태에서 Button2를 클릭하면 Div1이 약간 올라가고 Div2가 떨어집니다.

CSS가 적용된 코드를 작성했습니다. 하지만 슬라이딩 효과는 하나의 Div에서만 발생합니다.

나는 Javascript를 다음과 같이 작성했습니다.

var IsPanelDown = false; 
var IsPanel2Down = false; 

$(document).ready(function() { 

// Expand Panel 
$("#open").click(function(){ 
if (IsPanel2Down == false) 
{ 
    $("div#panel2").slideUp("slow"); 
    IsPanel2Down = false; 
} 
    $("div#panel").slideDown("slow"); 
    IsPanelDown = true; 
}); 

// Collapse Panel 
$("#close").click(function(){ 
    $("div#panel").slideUp("slow"); 
    IsPanelDown = false; 
}); 

// Switch buttons from "Log In | Register" to "Close Panel" on click 
$("#toggle a").click(function() { 
    $("#toggle a").toggle(); 
}); 

    $("#toggle2 a").click(function() { 
    $("#toggle2 a").toggle(); 
}); 

$("#open1").click(function(){ 
if(IsPanelDown == false) 
{ 

    $("div#panel").slideUp("slow"); 
    IsPanelDown = false; 
} 
    $("div#panel2").slideDown("slow"); 
    IsPanel2Down = true; 
}); 

// Collapse Panel 
$("#close1").click(function(){ 
    $("div#panel2").slideUp("slow"); 
    IsPanel2Down = false; 
}); 
}); 

Answer 1

같이, 그것은 당신을 도울 것이다 당신이 JQuery와에있는 같은 새로운으로도 해요,하지만 난 당신이 라이브 속성을 사용하는 경우 같아요

$("#toggle a").live('click', function() { $(this).functionName(); }); 

Answer 2

SlideUp/SlideDown 제어 가시성,하지 위치 . CSS 또는 문서 구조를 사용하여 두 DIV가 표시 될 때 상대 위치를 제어합니다.

Answer 3

그것은 테스트하지만 가정이

<div id="toggle_holder"> 
    <div class="toggle"></div> 
    <div class="toggle"></div> 
</div> 
<div id="button_wrapper"> 
    <button>button 1</button> 
    <button>button 2</button> 
</div> 
<script type="text/javascript"> 
    // jquery already loaded... 
    $(document).ready(function(){ 
    $('#button_wrapper button').click(function(){ 
     $('button', $(this).parent()).slideUp('slow'); 
     $(this).stop().slideDown('slow'); 
    }); 
    }); 
</script> 

Answer 4

같은 것을 시도하지있어이 ​​비슷한 마크 업을 가지고 :

는

<button id="button1">Toggle Div1</button> 
<button id="button2">Toggle Div2</button> 

<div class="container" id="div1">Content in DIV 1</div> 
<div class="container" id="div2">Content in DIV 2</div> 

다음과 같이 jQuery를 사용

$('button').click(function(e) { 
    // get the ID of the button so we can work out which DIV to show 
    var m = $(this), 
     id = m.attr('id').replace('button', ''); // should be either "1" or "2" after this 

    // hide the DIV that's visible, if any 
    $('.container:visible').slideUp('fast'); 

    // slide the one we want down 
    $('#div' + id).slideDown('fast'); 
}); 

을가 이 작업을 수행하는 방법이 많습니다. 일종의 태그는 마크 업에 달려 있습니다!