jQuery slideToggle one div class with multiple classes of same name


#1

Hi Folks,

I have a list of questions in HTML, each one has a list of possible answers which are hidden, I want to slideToggle. All the questions have the same class name but I cannot seem to get it to work.

Please see code snippets below...I know it can be done using "this" with jQuery but I cannot get it to work. When a single question is clicked every list of answers toggles to all the questions. I just want the answers list to toggle up and down to the specific question that was clicked.

Please can someone help me out.

HTML: 2 x questions as an example but I have dozens in my code.

What Car is most like me?


What Car is most like me?
Ferrari
Limousine
SUV
Stationwagon


Now pick your correct answer & click Save
Save
    <div class="QuestionChoice"><strong>What's my favourite Colour?</strong></div>
        <div class="QuestionDisplay" style="display:none;">  
              <p id="colourQuestion">What's my favourite Colour?
                  <span>Red</span>
	          <span>Blue</span>
	          <span>Green</span>
	          <span>Yellow</span>
	       </p>
	       Now pick your correct answer & click Save
	       <button id="Save">Save</button>
	</div>

JS:

$(document).ready(function() {
$(".QuestionChoice").click(function(){
$(".QuestionDisplay").slideToggle();
});
});