Question

I have a group of hidden divs all with the same class but with unique automatically generated IDs. I also have thumbnails which have the exact same IDs as the hidden divs.

When a thumbnail is clicked it’s ID is stored in the variable clickedId like this:


var clickedId = $(this).attr("id");


but what I can’t figure out is how to find the hidden div with that particular ID so that it can be shown with that same click.

This is the relevant HTML showing the divs to be unhidden.

<div id="projectHolder">
   <div class="project-content" id="project-<?php echo $post->post_name;?>">                                
   <p>Div content</p>
   </div>

   <div class="project-content" id="project-<?php echo $post->post_name;?>">                                
   <p>Div content</p>
   </div>
</div>

I’ve tried variations on this but they are mainly my guesses:

$('.project-content').find().each(function(){
if ($this.is(clickedId)).fadeIn(); 
});

Any suggestions to point me in the right direction?

Answer 1

Untested, but should get you going.

$('#projectHolder').children("#" + clickedId).fadeIn();

Also, as has been said, consider switching to classes so you don’t have duplicate Ids on the page.