JQUERY TOGGLE ON 1 ELM AT A TIME?

[klemme]

Hi all,

I have a a fact box on a site. Inside it I have listed questions in li elements:
` <li class="fakta_li"><p>Question 1?</p></li>
<div class="svar">ANSWER 1</div>

          <li class="fakta_li"><p>Question 2?</p></li>
          <div class="svar">ANSWER 2</div>

          <li class="fakta_li"><p>Question 3?</p></li>
          <div class="svar">ANSWER 3</div>

          <li class="fakta_li"><p>Question 4?</p></li>
          <div class="svar">ANSWER 4</div>

          <li class="fakta_li"><p>Question 5?</p></li>
          <div class="svar">ANSWER 5</div>` 

Then what I am after, is that when a li element with a question is clicked I want to show/toggle the div with the answer just beneath it.

With the code I have now, all the divs with answers are showing no matter what li element is clicked.

So how do I make it show the relevant div class="svar", relevant for the li just above it?

This is the jquery, which I am hoping someone can help me modify:
<script type="text/javascript">
$(document).ready(function() {
$('.fakta_li').click(function() {
$('.svar').toggle(400);
return false;
});
});
</script>

How so I make it only show the relevant .svar class?

Regards, Klemme

[pritaeas]

$(document).ready(function() {
  $('.fakta_li').click(function() {
    $(this).next().toggle(400); // <-- this represents the clicked element, next the following element
    return false;
  });
});

[klemme]

Perfect! Thanks a lot!

Can I somehow write the JQ, so that it only shows one answer at a time?

So when a new .next is clicked, the ".previous" will close?

[klemme]

Well I found out it could be done this way.
$(this).siblings(".svar").css("display","none").end().next(".svar").slideToggle(400);

All though, I would like to animate the previous viewed (sibling), instead of making it display:none in a split second..

[Airshow]

Try this:

var $this = $(this);
var mysvar = $this.next(".svar").slideToggle(400);
$this.siblings(".svar").not(mysvar).slideUp(400);

Airshow