CODEWITHSUNDEEP
javascriptjquerycsstoggle
kamal bhardwaj
kamal bhardwaj

Reputation: 27

need help on this toggle for little change

in this code below i simply want when i click on any content inside panel (content contained in p tags within panel), should not slidup the panel, till the click on panel or elsewhere is used but not child elements p inside panels, see html in fiddle for help and click try should not close the panel if the click event on other than it is used. this script was helped me with mr praveen earlier.

the code is

$(document).ready(function () {
    $("#toggle li > .panel").hide();
    $('.plusminus').html('+');

    $('#toggle li').click(function () {
        if( !$(this).children('.panel').is(":visible") ) {
            $("#toggle li > .panel").slideUp();
            $('.plusminus').html('+');
        }
        a = $(this).children(".plusminus");
        $(this).children(".panel").slideToggle('fast', function(){
            a.html($(this).is(":visible") ? '--' : '+');
        });
    });

    $("body").click(function(event){
        if ($(event.target).closest("ul").attr('id') != "toggle") {
            $("#toggle li > .panel").slideUp();
            $('.plusminus').html('+');
        }
    });
});

fiddle to play with is

http://jsfiddle.net/praveenscience/Ss3xU/26/

Upvotes: 0

Views: 88

Answers (1)

Nisanth Sojan
Nisanth Sojan

Reputation: 1099

remove $("#toggle li > .panel").hide(); on document load to make the panels open on load

add $("#toggle li > .panel").click(function(event){ event.stopPropagation(); }); will make the dropdown not to close when you click inside the panel

Upvotes: 1

Related Questions