Question

I have a list of divs that are dynamically generated and looks like the following

<div class="Foo">
  <div class ="Bar" id ="Something{X}">  // Where {X} is a counter i.e "Something1" , "Something2"
  <p>some stuff</p>
  <form>
    <input />
  </form>
</div>

Now after I dynamically generate all my div’s of class foo I do the following

$('.Foo').hide();

Which obviously hides all the div’s like I’d expect. However, what I’d like is the ability to click on a link above the div that allows you to unhide that individual div.

Now normally for a class I know I’d just go $(‘.Foo’).show(); and they would ALL show.

However, doing the following does not work.

$("#Something1").show(); 

Is this something that is allowed by jQuery to hide everything and then show individual items? Or am I going about this wrong?

Answer 1

Your problem is that you are hiding the parent container, which is staying hidden.

Try hiding your “bars” instead

$('.bar').hide();

and then $("something1").show()