Reveal Toggle verstecken andere div jquery

Question

Ich habe 2 Links, die beide verschiedene Divs offenbaren. Ich habe es Slideshowing alles in Ordnung. Aber was ich tun muss, ist den umgekehrten Schalter zu schließen (wenn es offen ist). Ähnlich wie ein Akkordeon-Panel funktioniert (wenn Sie einen Reveal-Toggle-Link auslösen, schließt sich das offene Panel und das neu ausgelöste Panel öffnet sich).

Hier ist die jQuery ich derzeit

bin mit

//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"); 
}); 

Hier ist ein Arbeits JSFiddle Link: 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

Gebrauch an der Spitze der Funktion in rechts: $ ('.left-lave-section'). slideUp ('langsam'); Und oben links in der Funktion: $ ('. Right-lave-section'). SlideUp ('langsam');