CODEWITHSUNDEEP
jquerycss
acctman
acctman

Reputation: 4349

jQuery re-showing a div after hidden code

this is an update to a preview code question that was fix. What I'm doing now is adding a second click linkable li to hide mykadd div and re-show mykink.

here is a sample of what i'm trying to do... http://jsfiddle.net/eWtaz/1/ it kind of works but its buggy

<li id="myklnk2">Show Main System</li>
<li id="myklnk1">Un/Select system</li>

<script type="text/javascript">
$(document).ready(function(){
    $(".mykadd").hide();    
    $("#myklnk2").on("click", function(){
        $(".mykink, .mykadd").slideToggle();

    $("#myklnk1").on("click", function(){
        $(".mykadd, .mykink").slideToggle();
    });
    });
});
</script>

Upvotes: 1

Views: 97

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

Just fix the position of your closure });

jsFiddle

$("#myklnk2").on("click", function(){
    $(".mykink, .mykadd").slideToggle();
});   // put it here

$("#myklnk1").on("click", function(){
    $(".mykadd, .mykink").slideToggle();   
});
// not here

Upvotes: 1

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

}) is on the wrong position.
Other thing you can do is select both li to bind an event and use display: none instead.

html

$(document).ready(function(){   
    $("#myklnk2, #myklnk1").on("click", function(){
        $(".mykink, .mykadd").slideToggle();
    });
});​

css

.mykadd {
    display: none;
}

demo

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

Don't attach your second click event inside the first click handler because that happens before the event gets propagated, which triggers your second click.

Upvotes: 0

Jarrett Barnett
Jarrett Barnett

Reputation: 803

Couldn't you just do this?

<li id="myklnk2">Show Main System</li>
<li id="myklnk1">Un/Select system</li>

<script type="text/javascript">
$(document).ready(function(){
    $(".mykadd").hide();    
    $("#myklnk2").on("click", function(){
        $(".mykink").slideUp();
        $(".mykadd").slideDown();
    });
    $("#myklnk1").on("click", function(){
        $(".mykadd").slideUp();
        $(".mykink").slideDown();
    });
});
</script>

Also the way you have it now, the $("#myklnk1") click event is nested inside of the $("#myklnk2") click event.

Upvotes: 1

Related Questions