Question

I have a nav which on a click i expand it, but if it’s already expanded and we click on the item again it shouldn’t do anything (return). I have this code but it is not working properly, currently if I click on the item it expands it but if i click again it closes the nav and if i click once again it expands it but it behaves funny. I basically only need to be able to click and open and do nothing if already opened as I will have a close button anyway.
p.s. “item” is a var i defined before in the code.

var item = $(".nav a");
<div class="nav">
    <a href="#">Trigger</a>
    <div class="wrapSubContent">
         <div class="wrapNavtoShowHide">
            ..content..
         </div>
     </div>
</div>

item.click(function(e) {
    e.preventDefault();
    $(".wrapSubContent").slideToggle("slow", "linear", function(){
        $(".wrapNavtoShowHide").slideToggle("slow", "linear");
    });
});

Anyone?

Answer 1

You should check if the div is hidden or not and then use slideDown.

var item = $(".nav a");
$(".wrapNavtoShowHide").hide();
item.click(function(e) {
    e.preventDefault();
    if ($(".wrapNavtoShowHide").is(":hidden")) {
        $(".wrapNavtoShowHide").slideDown("slow", "linear");
    }
});

Take a look at the jsfiddle example of this in action.