Question

I’ve got a page with two sets of div like so

<div id="set1">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
.....
<div class="n"></div>
</div>

<div id="set2">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
.....
<div class="n"></div>
</div>

“set2” is hidden on page load but each div needs to appear when the corresponding div in “set1” is clicked. For example, when “div#set1.1” is clicked, “div#set2.1” will show up. How can I do this with jQuery?

Thanks

Answer 1

This should work:

var set2 = $('#set2');

$('#set1 > div').click(function(){
    set2.find('.' + this.className).show();
});

We first cache #set2 for performance reasons, then attach a click event handler to each of the child div of #set1, which when clicked, will cause the corresponding div with the same class in #set2 to appear. See http://www.jsfiddle.net/yijiang/xCEVH/1/ for a simple demo.

However, class names starting with numbers are not valid in HTML. I’ve taken the liberty of correcting that mistake in the demo.