Question

For this html:

<a href="#" id="link-23">User 23</a>
<a href="#" id="link-24">User 24</a>

<div id="user-23">Bob</div>
<div id="user-24">Tim</div>

I’m trying to figure out how to write a script (using jquery) to toggle visibility of div#user-23 when a#link-23 is clicked?

NOTE: I’m coding in Rails and the above code is the html output of my script. I’m using an iterator in my script to create these divs and links.

Answer 1

With that HTML I’d suggest:

$('a').click(
    function(){
        $('#' + this.id.replace('link', 'user')).toggle();
    });

JS Fiddle demo.

If you use the href attribute, though, to target the relevant elements you could just use CSS (in compliant browsers at least):

<a href="#user-23" id="link-23">User 23</a>
<a href="#user-24" id="link-24">User 24</a>

<div id="user-23">Bob</div>
<div id="user-24">Tim</div>​

JS Fiddle demo.

References:

• Compatibility information for :target pseudo-selector.
• toggle().