显示切换隐藏其他div jquery

Question

我有2个链接，都显示不同的divs。我已经把它滑动到一切正常。但我需要做的是折叠相反的切换（如果它是开放的）。类似于手风琴面板的工作方式（当您触发显示切换链接时，打开的面板关闭，并打开新触发的面板）。

这里是我目前使用

//Left reveal toggle 
$(".left-reveal-toggle").on("click", function() { 
    $('.left-reveal-section').slideToggle("slow"); 
    $(".left-reveal-toggle").toggleClass("active"); 
}); 

//Right reveal toggle 
$(".right-reveal-toggle").on("click", function() { 
    $('.right-reveal-section').slideToggle("slow"); 
    $(".right-reveal-toggle").toggleClass("active"); 
}); 

这里jQuery的工作的jsfiddle链接：http://jsfiddle.net/wq73aeuh/1/

//Left reveal toggle 
 
$(".left-reveal-toggle").on("click", function() { 
 
    $('.left-reveal-section').slideToggle("slow"); 
 
    $(".left-reveal-toggle").toggleClass("active"); 
 
}); 
 

 
//Right reveal toggle 
 
$(".right-reveal-toggle").on("click", function() { 
 
    $('.right-reveal-section').slideToggle("slow"); 
 
    $(".right-reveal-toggle").toggleClass("active"); 
 
});

.left-panel { 
 
    min-height: 400px; 
 
    background: #31b9ce; 
 
    width: 50%; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
.right-panel { 
 
    min-height: 400px; 
 
    background: #4f5cd6; 
 
    width: 50%; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
.left-panel-reveal { 
 
    min-height: 400px; 
 
    background: #31b9ce; 
 
    width: 50%; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
.right-panel-reveal { 
 
    min-height: 400px; 
 
    background: #4f5cd6; 
 
    width: 50%; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
    font-size: 0px; 
 
    line-height: 0px; 
 
    display: block; 
 
} 
 

 
html, 
 
body, 
 
div, 
 
span, 
 
applet, 
 
object, 
 
iframe, 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p, 
 
blockquote, 
 
pre, 
 
a, 
 
abbr, 
 
acronym, 
 
address, 
 
big, 
 
cite, 
 
code, 
 
del, 
 
dfn, 
 
em, 
 
font, 
 
img, 
 
ins, 
 
kbd, 
 
q, 
 
s, 
 
samp, 
 
small, 
 
strike, 
 
strong, 
 
sub, 
 
sup, 
 
tt, 
 
var, 
 
b, 
 
u, 
 
i, 
 
center, 
 
dl, 
 
dt, 
 
dd, 
 
ol, 
 
ul, 
 
li, 
 
fieldset, 
 
form, 
 
label, 
 
legend, 
 
table, 
 
caption, 
 
tbody, 
 
tfoot, 
 
thead, 
 
tr, 
 
th, 
 
td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="left-panel"> 
 
    <a href="#" class="left-reveal-toggle">Read more form left panel</a> 
 
</div> 
 

 
<div class="right-panel"> 
 
    <a href="#" class="right-reveal-toggle">Read more from right panel</a> 
 
</div> 
 

 

 
<div class="clear"></div> 
 

 

 
<div class="left-reveal-section hide"> 
 
    <div class="left-panel-reveal">left panel reveal content</div> 
 
    <div class="right-panel-reveal">left panel reveal content</div> 
 
</div> 
 

 

 
<div class="right-reveal-section hide"> 
 
    <div class="left-panel-reveal">right panel reveal content</div> 
 
    <div class="right-panel-reveal">right panel reveal content</div> 
 
</div>

Answer 1

使用的功能在右侧的顶部： $ （ '左-揭示截面 '）效果基本show（' 慢'）; 左上角的功能： $（'。right-reveal-section'）。slideUp（'slow'）;