Question

Hi im very new to jq/js im using hide / show to open / close divs they work fine until I try to open a div when one is already open – they end up overlapping.

Is there a way to set it to close any open divs before opening a new one or perhaps only use hide if the div is open in the first place?

The jQuery I’m using is :

<script>
$(document).ready(function() {

    $('.content').hide();

    $("#show-services").click(function () {
          $(".content#services").show("slide", { direction: "right" }, 1000);
    });    


    $("#show-about").click(function () {
          $(".content#about").show("slide", { direction: "right" }, 1000);
    });  


    $("#show-contact").click(function () {
          $(".content#contact").show("slide", { direction: "right" }, 1000);
    });     

    $("#hide-services").click(function () {
          $(".content#services").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-about").click(function () {
          $(".content#about").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-contact").click(function () {
          $(".content#contact").hide("slide", { direction: "right" }, 1000);
    });

});
</script>

For reference the site its on is http://www.pudle.co.uk/int – you can see the conflict if you click a link in the top left and then click on another of the links.

Answer 1

Before using show(), use hide() on div(s) you want to hide something like:

$("#div1, #div2, #divX").hide(); // hide all these divs
$("#thisDiv").show(); // now show this one

Notice that you can combine multiple selectors with a comma like $("#div1, #div2, #divX")