CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
RMH
RMH

Reputation: 831

Slidetoggle div only after previous element has close

I currently have the follow set up: (all divs with a class of "secret" are hidden)

<div class="row">
    <div class="block align">
        <a class="desktop" data-toggle-target="click-1">
        </a>
    <div>
    <div class="block align">
        <a class="desktop" data-toggle-target="click-2">
        </a>
    <div>
<div>
<div class="row">
    <div id="click-1" class="secret">
        stuff
    <div>
    <div id="click-2" class="secret">
        stuff
    <div>
<div>
<div class="row">
    <div class="block align">
        <a class="desktop" data-toggle-target="click-3">
        </a>
    <div>
    <div class="block align">
        <a class="desktop" data-toggle-target="click-4">
        </a>
    <div>
<div>
<div class="row">
    <div id="click-3" class="secret">
        stuff
    <div>
    <div id="click-4" class="secret">
        stuff
    <div>
<div>

I slideToggle one a time with the following

$('.align .desktop').click(function (e) {
    $( '#' + $(this).data('toggleTarget') ).slideToggle(300).toggleClass('open');        
});

The problem is, if I click on data-toggle-target="click-2" to open the corresponding div, i need any other divs that are open to close first, then have the corresponding div slideToggle

Upvotes: 0

Views: 189

Answers (2)

j_s_stack
j_s_stack

Reputation: 665

Since you use JQuery use their BuildIn Function for an Accordion http://jqueryui.com/accordion/

UPDATE: Or for your Structur write a function that closes all Blocks first and than opens the Clicked one.

Upvotes: -1

jmore009
jmore009

Reputation: 12923

Your HTML structure is not ideal for this type of thing but chaining together a series of selectors can accomplish this:

$('.align .desktop').click(function (e) {
   var target = $(this).data('toggleTarget');
   $( '#' + target).siblings(".secret").slideUp().end().closest(".row").siblings(".row").find(".secret").slideUp().end().end().end().slideToggle(300).toggleClass('open');        
});

FIDDLE

Upvotes: 0

Related Questions