ページの div を非表示および表示できるようにする必要があります。
デフォルトでアクティブな 1 つが必要で、他のリンクをクリックして別の div を表示すると、アクティブな div を非表示にする必要があります。したがって、一度に開いている div は 1 つだけです。
必要なものを示すためにデモをまとめました。いわば機能していますが、別のリンクがクリックされると、アクティブな div を折りたたむ/非表示にする必要があります。
ページの div を非表示および表示できるようにする必要があります。
デフォルトでアクティブな 1 つが必要で、他のリンクをクリックして別の div を表示すると、アクティブな div を非表示にする必要があります。したがって、一度に開いている div は 1 つだけです。
必要なものを示すためにデモをまとめました。いわば機能していますが、別のリンクがクリックされると、アクティブな div を折りたたむ/非表示にする必要があります。
非表示にしようとしている 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/ (より少ないコードで実行)
このようなことを試してください:
$('.primaryButton2').click(function(){
$('.hideDetailsDiv').hide();//hide all divs, add to them class .hideDetailsDiv
$(this).nextAll('.hideDetailsDiv:first').show(400);
})
ここで私は上記の問題のために完全なビンを作りました。デモリンクを確認できます。
デモ: 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");
});
});