How would i go about showing the closest paragraph element to a unique link with jQuery?

Question

The title is a bit rusty, sorry about that.

Now let me explain what i'm trying to do.

I have a few listed items, like this:

<li>
    <a id="toggle" class="0"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a>
    <p id="meddel" class="0">text</p>
</li>

<li class='odd'>
    <a id="toggle" class="1"><h4>test<small>2010-04-17 kl 15:01</small></h4></a>
    <p id="meddel" class="1">test meddelande :) [a]http://youtube.com[/a]&lt;/p&gt;
</li>

The function i'm trying to achieve, is that when a user clicks a "toggle" link (the h4 text), i want the paragraph element below it to fade in. I thought of the idea of giving both the toggle link and the paragraph the same class, and then somehow make it get the paragraph with the same class as the toggle link clicked, and show it? But i'm not entirely sure how to do that either, and tbh, it doesn't sound like the greatest idea, but maybe that's the only way? I don't know...

Is there some way to just simply get the nearest paragraph (below the link) with the id "meddel" and fade it in? That sounds a bit easier...

I hope you can at least give me a few hints. Thanks in advance, -Nike

Answer 1

Your IDs need to be unique, I'd give your links a class, like this:

<li>
    <a class="toggle"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a>
    <p>text</p>
</li>

<li class='odd'>
    <a class="toggle"><h4>test<small>2010-04-17 kl 15:01</small></h4></a>
    <p>test meddelande :) [a]http://youtube.com[/a]&lt;/p&gt;
</li>

Then you can just do this:

$(function() {
  $("a.toggle").click(function() {
    $(this).next("p").animate({ opacity: 'toggle'});
  });
});

On any click of <a class="toggle"> this will find the next <p> and fade toggle it. Also, classes can't start with a number, make sure to not do this for predictable results.

Answer 2

Try this:

$(function(){
    $('a.toggle, a.toggle h4').toggle(function(){
      $(this).next().fadeOut('slow');
    }, function(){
      $(this).next().fadeIn('slow');
    });
});

Give your links a class instead of id.

Answer 3

$("h4").click(function() {
  var p = $(this).siblings("p");
  if (p.is(":hidden")) {
    p.fadeIn();
  } else {
    p.fadeOut();
  }
});

One issue: your anchors have the same ID. They shouldn't. IDs should be unique.

Answer 4

Thanks to everyone!