Q:

Show/hide children on parent click

I want child show/hide when click on parent
HTML
<div id="a" class="childshow">Parent
       <div id="b" class="childshow" style="display:none">Child
           <div id="c" class="childshow" style="display:none">inner child
          </div>
          <div id="c1" class="childshow" style="display:none">inner child1
          </div>      
    </div>
</div>

JQUERY
$(".childshow").click(function() {
    if(jQuery(this).find('>.childshow').css("display")=="none"){
        $(this).find('>.childshow').show();
    }else{
        $(this).find('>.childshow').hide();
    }   
});

but this does not work correctly   

A:

You could use toggle() instead and stop event from bubbling and BTW you should use .children():
DEMO jsFiddle
$(".childshow").click(function (e) {
    e.stopPropagation();
    jQuery(this).children('.childshow').toggle();
});

A:

here you go
 $(".childshow").click(function (e) {
     e.stopPropagation(); //to stop event bubbling
     if ($(this).children('.childshow').is(':visible')) { //check if hidden or not
         $(this).children('.childshow').hide(); //if yes hide

     } else {

         $(this).children('.childshow').show(); // else show
     }
 });

or use toggle() instead of show and hide
$(".childshow").click(function (e) {
    e.stopPropagation();
    $(this).children('.childshow').toggle();
 });

fiddle here

