Show/Hide Multiple Divs

Question

I am trying to trigger a show/hide of one div at a time.

What is happening is that all the divs (.shareLink) are opening at the same time.

Below is my jqury:

$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(){
$(".shareLink").toggle("400");
return false;
});
});

Below is my HTML:

<dl class="links">
    <dd>content</dd>
    <dt class="description">content</dt>
    <ul class="tools">  
     <li><a class="trigger" href="#">Share Link</a></li>
    </ul>
</dl>
<div class="shareLink">
<?php print check_plain($node->title) ?>
</div>

Any help with the above problem would be much appreciated.

Cheers.

Answer 1

You might want to try:

$(document).ready(function(){
    $(".shareLink").hide();
    $("a.trigger").click(function(e){
        e.preventDefault();
        $(this).next().toggle("400");
    });
});

The answer is it depends on the structure of your document. Here is a sample of something that will work with the above function.

<a class="trigger">click here</a>
<div class="shareLink">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

Answer 2

$(".shareLink").toggle("400");

Refers to any div on the page with a class of ".shareLink".

You will need to find a way to distinguish the specific div you want to show.

Answer 3

Based on your HTML, you need to do this:

$(function() {
    $("div.shareLink").hide();
    $("a.trigger").click(function(){
        $(this).parents('dl.links').next('div.shareLink').toggle(400);
        return false;
    });
});

This walks up to the parent DL and then moves over to the next shareLink div and toggles it.