CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
MultiformeIngegno
MultiformeIngegno

Reputation: 7059

Slidetoggle 2 adjacent divs

<div class="unique1">Blabla1</div>
<div class="amministrazione">Amministrazione</div>
<a href="">some link</a>
<a href="">some link</a>
<div class="didattica">Didattica</div>
<a href="">some link</a>

<div class="unique2">Blabla2</div>
<div class="amministrazione">Amministrazione</div>
<a href="">some link</a>
<div class="didattica">Didattica</div>
<a href="">some link</a>
<a href="">some link</a>

<div class="unique3">Blabla3</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>

<div class="unique4">Blabla4</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
<a href="">some link</a>

I'd like to have .amministrazione, .didattica and all the links on display:none by default. When user clicks on .unique1 or .unique2 or .unique3 or .unique4 (only) the next .amministrazione AND .didattica slidetoggle down.

Here's what I have so far.. but it's not toggling the correct elements:

jQuery(function () {
    jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
        jQuery('.amministrazione, .didattica').not(newTarget).slideUp();

    });
});

http://jsfiddle.net/2rgqpzpt/

Upvotes: 2

Views: 57

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Use nextAll with the :first selector to target the appropriate divs:

jQuery(function () {
  jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
    jQuery('.amministrazione, .didattica').slideUp();
    jQuery(this).nextAll('.amministrazione:first, .didattica:first').stop().slideDown();
  });
});

Fiddle 1

You could accomplish the same thing using nextUntil:

jQuery(function () {
  var un= jQuery('.unique1, .unique2, .unique3, .unique4');
  un.click(function () {
    jQuery('.amministrazione, .didattica, a').slideUp();
    jQuery(this).nextUntil(un).stop().slideDown();
  });
});

Fiddle 2

Upvotes: 3

Silence Peace
Silence Peace

Reputation: 339

You can change your code with

jQuery(function () { jQuery('.unique1, .unique2, .unique3, .unique4').click(function () { var index = $(this).index(), newTarget = $(this).next('.amministrazione'); newTarget= newTarget.add(newTarget.next()); newTarget.slideDown() jQuery('.amministrazione, .didattica').not(newTarget).slideUp(); }); });

Upvotes: 0

Related Questions