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 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.
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")