jQuery slideToggle one div class with multiple classes of same name

Community Off Topic
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();
});
});