jQuery隱藏並顯示摺疊多個div

Question

我需要能夠隱藏並在頁面上顯示div。

我需要一個默認活動，然後當我點擊其他鏈接來顯示另一個div時，我需要活動div來隱藏，等等。所以在一個特定時間只有一個div是開放的。

我已經把一個演示，共同展示我的要求，我有它的工作這麼說，但我需要它，一旦另一個鏈接被點擊摺疊/隱藏活躍股利。

http://jsfiddle.net/QFfzs/3/

Answer 1

你需要切換這樣前一類添加到你想隱藏的div，然後隱藏所有div：

//adding '.hideMe' to the divs to be toggled 
$(document).ready(function() { 
    $('#hideDetailsDiv').hide(); 
    $('a#hideDetailsButton').click(function() { 
     if (!$('#hideDetailsDiv').is(':visible')) { 
      $('.hideMe').hide(400); 
     } 
     $('#hideDetailsDiv').toggle(400); 
    }); 
}); 

的jsfiddle：http://jsfiddle.net/QFfzs/4/

更新的jsfiddle：http://jsfiddle.net/QFfzs/5/（用更少的代碼完成）

Answer 2

嘗試這樣：

$('.primaryButton2').click(function(){ 
    $('.hideDetailsDiv').hide();//hide all divs, add to them class .hideDetailsDiv 
    $(this).nextAll('.hideDetailsDiv:first').show(400); 
}) 

Answer 3

在這裏，我已經做了完整的箱子上面的問題。您可以查看演示鏈接....

演示：http://codebins.com/bin/4ldqp84

HTML

<div id="panel"> 
    <a href="#"> 
    Show Default 
    </a> 
    <div class="box"> 
    <p> 
     Default Div Box is already Active..! 
    </p> 
    </div> 
    <a href="#"> 
    Show Box1 
    </a> 
    <div class="box"> 
    <p> 
     Showing Div Box 1..! 
    </p> 
    </div> 

    <a href="#"> 
    Show Box2 
    </a> 
    <div class="box"> 
    <p> 
     Showing Div Box 2..! 
    </p> 
    </div> 
    <a href="#"> 
    Show Box3 
    </a> 
    <div class="box"> 
    <p> 
     Showing Div Box 3..! 
    </p> 
    </div> 
    <a href="#"> 
    Show Box4 
    </a> 
    <div class="box"> 
    <p> 
     Showing Div Box 4..! 
    </p> 
    </div> 
</div> 

CSS

.box{ 
    border:1px solid #334478; 
    width:400px; 
    height:50px; 
    background:#f7a8a5; 
    margin-top:3px; 
    /* Default All Divs Are Hidden*/ 
    display:none; 
} 
#panel a{ 
    display:block; 
    font-size:13px; 
} 
.box p{ 
    text-align:center; 
} 

jQuery的

$(function() { 
    //Show Default First div is Active 
    $("#panel .box:first").show(); 
    $("#panel a").click(function() { 
     $("#panel .box").hide(400); 
     $(this).next(".box").show("slow"); 
    }); 
}); 

演示：http://codebins.com/bin/4ldqp84