CODEWITHSUNDEEP
javascriptjquery
rob.m
rob.m

Reputation: 10601

open and close or return if already open nav

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?

Upvotes: 1

Views: 149

Answers (2)

Pulkit Goyal
Pulkit Goyal

Reputation: 5664

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.

Upvotes: 2

NickGreen
NickGreen

Reputation: 1752

Check if the div is already openened, like this±

item.click(function(e) {
    e.preventDefault();
    if ( $(".wrapSubContent").is(":visible") ) {
     return
    }
        $(".wrapSubContent").slideToggle("slow", "linear", function(){
            $(".wrapNavtoShowHide").slideToggle("slow", "linear");
        });
});

Or:

item.click(function(e) {
    e.preventDefault();
    if ( $(".wrapSubContent:visible").length > 0) {
     return
    }
        $(".wrapSubContent").slideToggle("slow", "linear", function(){
            $(".wrapNavtoShowHide").slideToggle("slow", "linear");
        });
});

Upvotes: 1

Related Questions