Question

When I click a node in a drupal view it toggles the body for every node in my view instead of just the node I am clicking. How can I get jquery to toggle just the node I am clicking? Here is my code in the head of my node template (node-type.tpl.php)

 <script>
 $("button").click(function () {
 $(".more").toggle();
 });
 </script>

And the code for the body to be toggled.

 <div class="more"><?php print $node->content['body']['#value']; ?></div>

Currently it toggles every div with the class “more” in my entire view instead of just in the node which I am clicking. How do I restrict it to just the clicked node?

I would also like it if only body were open at a time. ie; when a different node is clicked, the previous node’s body toggles closed.

I’m sure it’s probably easy but I just can’t seem to figure it out…

Answer 1

Where is the button relative to .more?

If the button is in the .more element, you want to do something like this:

$("button").click(function () {
    $('.more').hide();
    $(this).closest(".more").show();
});

If the button is not a parent or ancestor of .more, you will need to do a little more. If the buttons are in the same order as the .more elements (and there aren’t any unrelated buttons), you can do this:

$("button").click(function () {
    $('.more').hide();
    $('.more').eq( $('button').index( $(this) ) ).show();
});

However, you are better off linking the button to the .more content with an id and a href, or some jQuery data:

<button class='morebutton' data-more="#more1">Button 1</button>
<button class='morebutton' data-more="#more2">Button 2</button>
<div class='more' id="more1">More Number 1</div>
<div class='more' id="more2">More Number 2</div>

Script:

$(".morebutton").click(function () {
    $('.more').hide();
    $( $(this).data('more') ).show();
});

Demo: http://jsfiddle.net/jtbowden/EfUxt/

There are libraries that help with these kinds of situations, such as jQuery UI Tabs.