javascript - jQuery Div inside Div -

i'm trying display photo gallery jquery. code:

<script>       $("#vsetky").click(function(){   $("#obrazky").show(); });        $("#c").click(function(){   $("#cervene").show(); }); </script>   <div id="obrazky">   <div id="cervene">     <img src="1.png">     <img src="1.png">   </div>   <div id="zlte">     <img src="2.png">     <img src="2.png">   </div>   <div id="zelene">     <img src="3.png">     <img src="3.png">   </div>  </div> 

when #vsetky element clicked... works, every picture displayed. when #c element clicked, there aren't pictures. tried use

 $("#obrazky > #cervene").show(); 

i've tried other methods nothing working. me please - doing wrong?

what css like? if both #obrazky , #cervene have display:none, when click on #c you're removing display:none rule #cervene, not it's parent wrapping div#obrazky.

edit: you'll want change css hiding #cervene, #zlte, , #zelene, , show , hide individually javascript. if element's parent has display:none, 'show()'ing javascript doesn't because you're not removing display:none parent.

<script>     $("#vsetky").click(function(){         $("#cervene, #zlte, #zelene").show();     });      $("#c").click(function(){         $("#cervene").show();     }); </script>   <style>     #obrazky {display:inline-block;}     #cervene, #zlte, #zelene {display:none;} </style>  <div id="obrazky">     <div id="cervene">         <img src="1.png">         <img src="1.png">     </div>     <div id="zlte">         <img src="2.png">         <img src="2.png">     </div>     <div id="zelene">         <img src="3.png">         <img src="3.png">     </div>  </div>