views:

41

answers:

4

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

+2  A: 

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.

Nick Craver
Thanks! Oh i forgot that id's had to be unique, thanks for that aswell! I'll give this a shot! Appreciate it! :)
Nike
A: 

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.

Sarfraz
+2  A: 
$("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.

cletus
@cletus: Is the `fadeToggle` there in latest version of JQuery or it was there in previous versions as well?
Sarfraz
A: 

Thanks to everyone!

Nike