jQuery Div inside Div

Question

I'm trying to display a photo gallery with jQuery. This is my 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 the #vsetky element is clicked... It works, every picture is displayed. When the #c element is clicked, there aren't any pictures. I tried to use

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

I've tried other methods but nothing is working. Help me please - what am I doing wrong?

There is no element with id "c" in the example above. Where is the element "c"? — Dusty, Jul 17 '13 at 23:11
That's not full Code.. I don't think the Link with id #c is important — Martin Hetfield Mali, Jul 17 '13 at 23:24
Can you verify that the click listener for #c is actually executing? — Dusty, Jul 17 '13 at 23:35

Chris Arasin · Accepted Answer · 2013-07-17T23:29:22.007

What does your css look like? If both #obrazky and #cervene have display:none, then when you click on #c you're only removing the display:none rule from #cervene, but not it's parent wrapping div#obrazky.

Edit: You'll want to change the css to be hiding #cervene, #zlte, and #zelene, and then show and hide those individually with the javascript. If an element's parent is has display:none, then 'show()'ing it with javascript doesn't to anything because you're not removing the display:none from the 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>

#cervene don't have any CSS .. #obrazky { display:inline-block; margin-top:100px; width:700px; display:none; } — Martin Hetfield Mali, Jul 17 '13 at 23:23

jQuery Div inside Div

1 Answers1