My Javascript is toggling all elements rather than just one

Question

I have a list of questions and answers. I want a Plus/Minus icon to toggle, and when it is clicked, the answer appears below. I have written up the basic code, but when I click the Plus button for one of the questions, it toggles the answer to display on all of the questions rather than just that specific one. Please see the jsfiddle.

JS:

$(".plus").click(function(){
    $(this).toggleClass("minus plus");
});

$(".plus").click(function(){
    $(".answer").toggle();
});

How do I get it so that if I press the icon for Question 1, it only shows me Answer 1, and doesn't toggle the other icons?

Someone really enjoys going negative on all the answers for some reason — Dave Stein, Feb 22 '16 at 16:47
this is a dupe many times over, just having a hard time wading through all the other garbage title questions that are similar to this. Here's one, but it isn't any better: http://stackoverflow.com/questions/2965718/jquery-toggle-elements-with-class-in-parent-div-only — Kevin B, Feb 22 '16 at 16:51

score 0 · Answer 1 · edited May 23 '17 at 12:15

Updated Fiddle

You should replace <p><div class="plus"></div>Question 1</p> by <p><span class="plus"></span>Question 1</p> since <p><div></div></p> is not a valid HTML code, check the following post Putting <div> inside <p> is adding an extra <p>.

You should toggle the related answer with clicked .plus, so you could use closest('li') to get the parent question then .find(".answer") to target the related answer :

$(".plus").click(function(){
    $(this).closest('li').find(".answer").toggle();
});

Instead of :

$(".plus").click(function(){
    $(".answer").toggle();
});

Hope this helps.

$(".plus").click(function(){
  $(this).toggleClass("minus plus").closest('li').find(".answer").toggle();
});

.faq-block ul, .faq-block ul li {
 list-style-type: none !important;
}
span.plus {
 display: block;
 width: 30px;
 height: 30px;
 background-color: red;
 float:left;
 margin-right: 20px;
 cursor:pointer;
}
span.minus {
 display: block;
 width: 30px;
 height: 30px;
 background-color: blue !important;
 float:left;
 margin-right: 20px;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-block">
  <ul>
    <li class="question">

      <p><span class="plus"></span>Question 1</p>
      <p class="answer" style="display: none;">Answer 1</p>
    </li>
    <li class="question">

      <p><span class="plus"></span>Question 1</p>
      <p class="answer" style="display: none;">Answer 1</p>
    </li>
  </ul>
</div>

score 0 · Accepted Answer · answered Feb 22 '16 at 16:44

0

Here's an updated JSfiddle: https://jsfiddle.net/ocm81sv8/7/

I would do your script like this:

JavaScript

$(".plus").click(function(){
    var $this = $(this);
    $this.toggleClass("minus plus");
    $this.parent().next(".answer").toggle();
});

HTML

<div class="faq-block">
    <ul>
        <li class="question">

            <p><span class="plus"></span>Question 1</p>
            <p class="answer" style="display: none;">Answer 1</p>
        </li>
        <li class="question">

            <p><span class="plus"></span>Question 2</p>
            <p class="answer" style="display: none;">Answer 2</p>
        </li>
    </ul>
</div>

I removed having 2 click handlers for the same item and placed them into one call.

I also corrected your .plus elements to be span tags, as it's invalid for a block level element like div to be within p tags.

answered Feb 22 '16 at 16:44

Michael Giovanni Pumo

14,338
18
91
140

I cannot understand why on Earth I have been downvoted for my answer? I've provided a working solution to the OP's question with code examples and an explanation of changes. Bizarre. – Michael Giovanni Pumo Feb 22 '16 at 16:47
1

I'm also unsure why you have been downvoted. This has fixed my issue perfectly. Thanks for your help Michael. – S. Brown Feb 22 '16 at 16:48
@S.Brown I guess perhaps someone who answered also is doing this to get their answer accepted. Very petty if this is the case! Glad it worked for you. There are certainly more elegant ways of doing what you're trying to achieve but I guess this will suffice for now. Let me know if you need further help understanding any of the changes. – Michael Giovanni Pumo Feb 22 '16 at 16:50

score -1 · Answer 3 · answered Feb 22 '16 at 16:41

The fact that you're already using $(this) to get the currently clicked-on element, and yet still fail to use that to get the right target, makes me sad...

First things first. It is not valid to have <div> inside a <p> tag, causing JSFiddle to highlight these errors. It can be fixed by using <span> instead of <div>.

Now, as for doing the toggle, just navigate your way through the DOM:

$(this).closest(".question").find(".answer").toggle();

Navigates up the tree to the .question, then back down to the .answer, and toggles it.

https://jsfiddle.net/ocm81sv8/3/

score -1 · Answer 4 · answered Feb 22 '16 at 16:44

https://jsfiddle.net/ocm81sv8/8/

$(".plus").on('click', function() { 
  $(this).toggleClass("minus plus")
  .closest('li').find(".answer").toggle();
});

This will make sure if you click on a plus element, it will only toggle its own item, and then find the answer to show.

score -3 · Answer 5 · answered Feb 22 '16 at 16:43

You need to use a more specific selector. Currently, you are using the class selector ".plus", which is going to be something common to all your questions. It is not a unique identifier. Your code will match all elements that fit your selector scope. To see what I mean, just enter $(".plus") in the chrome console on that page. It will return an array consisting of all the elements that match.

My suggestion is add a unique id to each question, so perhaps something like "question-0", "question-1" ... and so on, then use the selector "#question-X" to toggle it.

Hopefully that helps, Good luck

My Javascript is toggling all elements rather than just one

5 Answers5