jQuery Forum

Hey!

I'm very new to js and jquery so any pointers i welcome

Here is the code I'm working with now:

$(document).ready(function() {

$('[id^=download]').click(function() {
var id = '.'+$(this).attr("id");
var class = '#'+$(this).attr("className");
$(id).hide();
$(class).show();
});

});

<div id="cat_X">
   <div class="download_X" id="links_X_1">links 1</div>
   <div class="download_X" id="links_X_2" style="display:none">links 2</div>
   <div class="download_X" id="links_X_3" style="display:none">links 3</div>
    <a href="#" id="download_X" class="links_X_1">show 1</a>
    <a href="#" id="download_X" class="links_X_2">show 2</a>
    <a href="#" id="download_X" class="links_X_3">show 3</a>
</div>

"X" is an auto generated id pulled from a db. The html is repeated as many times as there are items in the db. This script works now, but I wouldn't mind getting some suggestions on a smoother way of doing it, since switching class for the href is probably the way to get where i want.

Anyways, what i want to do now is simply highlight the href that are active. If "show 1" is pressed, it is highlighted, while "show 2" and "show 3" remains as they were. And when pressing "show 2" it is highlighted "show 1" is reverted to not being highlighted and "show 3" remains as it were.

Cheers!