Question

I’m looking for a jQuery solution for this. When I click, let’s say on a artist name. Theirs another div beside that has the information showing up. (possibly in a animation/fading way)

Can anyone help?

Answer 1

Link and Info Within Physical Proximity

Use this method if your artist link and artist info is within physical proximity (i.e., sibling in the DOM). Let’s say you have:

<a ... class="artistInfo">Artist name</a>
<div class="artistInfo"> .... shown on link click </div>

... repeat

Then use:

$('div.artistInfo').hide(); // Initially hide info
$('a.artistLink').click(function() { // Show on click
    $(this).next('div.artistInfo').fadeIn();
});

next() is used to avoid wrapping each link-info set in “per-artist” container. Thus, you should be able to have multiple “sets” of link-plus-info in the same page.

Link and Info in Different Places

When there is no physical proximity between the link and tha info, you will need some sort of identifiers from the link to the info*. E.g.,

<a ... class="artistLink" id="artistLink-1">Artist name</a>

... 

<div class="artistInfo" id="artistInfo-1"> .... shown on link click </div>

You can now:

$('div.artistInfo').hide(); // Initially hide all infos
$('a.artistLink').click(function() { // Show on click (by reference)
    var n = $(this).attr('id').substring(11); // Remove "artistLink-"
    $('#artistInfo' + n).fadeIn();
});

---

*) Note: You could use the DOM index if links and infos are ordered similarly. I.e., the nth <a> element corresponds to the n info element.