CLOSE all Divs with slide before a new one OPENS using jquery SLIDETOGGLE // visible / hide?

Question

I'm having a problem with opening/closing divs at the same time. I've read a lot about it and tried like everything but nothing seems to work... this is how it is supposed to look like:

DEMO

This is the code I got. It works perfectly with one DIV:

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
}); });

I want this to work with 3 divs or more: That the currently opened div closes up with a slide as soon as a new link is clicked and the div comes up with a slide.

Would be so happy to hear from you :-) Thank you so much!!

Answer 1

If I understand correctly I think you're after something like this:

$('a.link').on('click', function(e) {

  e.preventDefault();
  var slideSelector = '#' + $(this).attr('id').replace('link', 'slide');

  // slide down the div which corresponds to the clicked anchor,
  $(slideSelector).slideDown(500, function() {
    // slide the rest up
    $('div.slide').not($(slideSelector)).slideUp(500);
  });

  // or do it in the reverse order
  $('div.slide').not($(slideSelector)).slideUp(500, function() {
    $(slideSelector).slideDown(500);
  });      

});

Here's the markup I used for the above example:-

<a id="link1" class="link" href="#">Link 1</a>
<a id="link2" class="link" href="#">Link 2</a>
<a id="link3" class="link" href="#">Link 3</a>

<div class="slide" id="slide1">Slide Example #1</div>
<div class="slide" id="slide2">Slide Example #2</div>
<div class="slide" id="slide3">Slide Example #3</div>

Notice that the <a>'s and <div>'s have all been given id's, these are used to relate the two together (take a look at the slideSelector).

Here's a fiddle which will toggle between each of the above examples each time a link is clicked

This is just one way of doing it, another way for example would be to wrap the links and divs in separate containers, and then use the index() in order to select the div which corresponds to the clicked link, however the links and divs would have to appear in the same order for this to work.