Open only dropdown that is clicked

Question

In my current code, whenever I click to maximise one dropdown, the contents of the both dropdown will appear. I only want the the question that i click on to drop the answer down. Can anyone help me? I'm not good with jquery so I've tried various times but failed in solving the problem. Below is the link the to code.

http://jsfiddle.net/Qy6Sj/912/

HTML CODE

<div class="faqdropdown">
    <ul class="faqquestion"> 
           Q: Question 1 <li class="faqbutton">+</li>
    </ul>
        <ul class="faqcontent">
       A: Answer 1
        </ul>

        <ul class="faqquestion"> 
       Q: Question 2 <li class="faqbutton">+</li>
        </ul>

        <ul class="faqcontent">
       A: Answer 2
        </ul>
</div>

JAVASCRIPT

$(document).ready(function() { 
$(".faqbutton").click(function(){
$(this).closest('.faqcontent').find('.faqcontent').addClass("open");

if($(this).html() == "-"){
     $(this).html("+");
 }
 else{
     $(this).html("-");
 }

  $(".faqcontent").slideToggle();
 });
});

Answer 1

Do this way:

$(document).ready(function () {
  $(".faqbutton").click(function () {
     if ($(this).html() == "+")   //<-----check for "+" here
     {
        $(this).html("-");    // <----replace the text to "-" here
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
     } else {
        $(this).html("+");
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
     }
  });
});

---

You were checking wrong text in the condition your initial text is + so you have to check for that, then replace the innerhtml of the clicked button.

and you have to traverse up to the parent of the clicked button, with .closest() or .parent() would do that. .closest() is performing quite faster so you can use this then you can go for the next element you want to slidetoggle.

although i can suggest you to do a valid html markup.your current markup is invalid, you can not have a text node outside of li that way, so i suggest you to do this:

---

<li class="faqbutton">Q: Question 1 <span>+</span></li>

so if you follow this markup then you have to do this in jQuery:

$(document).ready(function () {
  $(".faqbutton").click(function () {
      if ($(this).find('span').html() == "+")  //<----change here
      {
        $(this).find('span').html("-");    //<-------change here
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
      } else {
        $(this).find('span').html("+");   //<-------change here
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
      }
  });
});

Demo

Answer 2

Change

$(".faqcontent").slideToggle();

to

$(this).closest(".faqquestion").next().slideToggle();

DEMO here.

Answer 3

try something like this,FIDDLE

    $(this).parent().next(".faqcontent").slideToggle();

Answer 4

Fixed. You have slideToggle all .faqcontent elements instead of one next.

Answer 5

simply toggle first content on DOM ready, nothing extra to do

$(document).ready(function() { 
 $(".faqcontent").first().slideToggle();
$(".faqbutton").click(function(){

    if($(this).html() == "-")

         {
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }

$(".faqcontent").slideToggle();
});
});

http://jsfiddle.net/Qy6Sj/918/

Answer 6

see this fiddle 
  http://jsfiddle.net/Qy6Sj/919/  .
i have updated your code

Answer 7

You can use combination of .closest() and .next()

Use

$(this).closest('.faqquestion').next(".faqcontent").slideToggle();

instead of

$(".faqcontent").slideToggle();

DEMO