When click on title, make information appear on another div for the information?

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

Use the .html method of jquery

Answer 2

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.

Answer 3

If by 'beside' you mean it is the very next sibling, you can use next:

$(".artist").click(function() {
    $(this).next("div").slideToggle("slow");
});

<span class="artist">Foo and the Jackals</span>
<div>some content</div>

<span class="artist">Jeff and the misshapen lunatics</span>
<div>some content</div>

...

slideToggle will "Display or hide the matched elements with a sliding motion.".