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/fad开发者_StackOverflow社区ing way)

Can anyone help?

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.

Use the .html method of jquery

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.".

There can be a number of ways to do this. But then it actually depends on how exactly you want it. one possible way can be use of fadeIn method on a hidden DIV.

<div class='box' style="display:none;"> <p> Artist Description </p> </div>

for example on this code use this jquery

jQuery('#abcd').click(function(){ jQuery('.box').fadeIn(); });