CODEWITHSUNDEEP
javascriptjqueryfunctionclick
omnix
omnix

Reputation: 1899

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

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?

Upvotes: 0

Views: 481

Answers (4)

jensgram
jensgram

Reputation: 31498

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.

Upvotes: 3

sushil bharwani
sushil bharwani

Reputation: 30197

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>

<p id='abcd'>Artist Name</p>

for example on this code use this jquery

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

Upvotes: 0

karim79
karim79

Reputation: 342675

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

Upvotes: 0

Argiropoulos Stavros
Argiropoulos Stavros

Reputation: 9533

Use the .html method of jquery

Upvotes: 0

Related Questions