CODEWITHSUNDEEP
jquery
Geoff
Geoff

Reputation: 199

Multiple toggle open close panels

I have 5 <a> links that I want to slide up content from below, but if the user opens one then opens the other the first one closes so only 1 stays open.

I'm nearly there with the code have in that the panels slide up and if you click the next the other one closes and the next opens. But I can't close them all down after, if I click to open one then click again to close it re-opens.

My JS:

$('.panelTab').click(function() {
    $('.animatedPanel').hide();
    $(this).next('.animatedPanel').slideToggle({ direction: "up" }, 100);

My HTML:

<div class="panelTab first">
    <a class="click" href="#">LATEST NEWS</a>
</div>
<div class="animatedPanel">news panel...</div>
<div class="panelTab">
    <a class="click" href="#">CALENDAR</a>
</div>
<div class="animatedPanel"> calendar panel...</div>

Upvotes: 0

Views: 1223

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You need to avoid the current clicked element while hiding all the .animatedpanels

$('.panelTab').click(function() {
    var panel = $(this).next()
    $('.animatedPanel').not(panel).slideUp();
    panel.slideToggle({
        direction: "up"
    }, 100);
});

Fiddle

Upvotes: 1

Related Questions