Question

I have four jquery sliders in a page with these scripts:

$(document).ready(function(){
  $("#information").click(function(){
    $("#information_show").slideToggle("medium");
  });
});

$(document).ready(function(){
  $("#menu").click(function(){
    $("#menu_slide").slideToggle("medium");
  });
});

$(document).ready(function(){
  $("#books").click(function(){
    $("#books_toggle").slideToggle("medium");
  });
});

$(document).ready(function(){
  $("#content").click(function(){
    $("#content_div").slideToggle("medium");
  });
});

So for example when I click on the div #information the #information_toggle is visible. I wounder if there is any way to make the sliders only show one at once.

Example: When click on #books, the #books_toogle show. Now when click on #menu the #menu_slide shows, at the same time the #menu_slide shows #books_toggle toogle/close automatic. So only one hidden div will show at once.

Answer 1

It would help to see your html, but it is easy to do this in an ugly way:

$("#information").click(function(){
    $("#information_show").slideToggle();
    $("menu_slide, books_toggle, content_div").slideUp();
});

However, a much prettier way to do this would be with classes:

$(".slider").on('click', function () {
    var $assocDiv = $(".slider_show").eq($(this).index));
    $assocDiv.slideToggle();
    $(".slider_show").not($assocDiv).slideUp();      
});

Regardless, you only need one $(document).ready, which can just be written as $(, and 'medium' is already the default animation speed.