How do I create a show/hide loop in jQuery?

Question

Here is my HTML with 3 questions and 3 answers:

<div class="faq-carousel">
<div class="all-questions question1">
    <h4>Question 1</h4>
</div>
<div class="all-questions question2">
    <h4>Question 2</h4>
</div>
<div class="all-questions question3">
    <h4>Question 3</h4>
</div>

<div class=" all-answers answer1">
    <p>Answer 1</p>
</div>              
<div class=" all-answers answer2">
    <p>Answer 2</p>
</div>  
<div class=" all-answers answer3">
    <p>Answer 3</p>
</div>

Here is my jQuery that shows/hides the 3 questions and answers:

jQuery(document).ready(function () {

"use strict";

jQuery(".all-answers").hide();
jQuery(".answer1").show();
jQuery(".all-questions").removeClass("highlighted");
jQuery(".question1").addClass("highlighted");

var slideNumber = 1;
jQuery(".question1").click(function () {
    jQuery(".all-answers").hide();
    jQuery(".answer1").show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(".question1").addClass("highlighted");
    slideNumber = 1;
});

jQuery(".question2").click(function () {
    jQuery(".all-answers").hide();
    jQuery(".answer2").show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(".question2").addClass("highlighted");
    slideNumber = 2;
});

jQuery(".question3").click(function () {
    jQuery(".all-answers").hide();
    jQuery(".answer3").show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(".question3").addClass("highlighted");
    slideNumber = 3;
}); });

How can I change the jQuery so that I can add more Q and A's to the HMTL without having to add more jQuery?

Many thanks!

Answer 1

The process you're trying to achieve here is to 'DRY' up your code, in other words, Don't Repeat Yourself.

To achieve what you need you can use common classes on the questions and answers, then relate the two together by their indexes, something like this:

"use strict";

jQuery(document).ready(function($) {
  $('.question').click(function() {
    $('.question').removeClass('highlighted');
    var index = $(this).addClass('highlighted').index();
    $('.answer').hide().eq(index).show();
  });
});

.answer { display: block; }
.answer ~ .answer { display: none; }
.highlighted { background-color: #CC0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-carousel">
  <div class="question">
    <h4>Question 1</h4>
  </div>
  <div class="question">
    <h4>Question 2</h4>
  </div>
  <div class="question">
    <h4>Question 3</h4>
  </div>

  <div class="answer">
    <p>Answer 1</p>
  </div>
  <div class="answer">
    <p>Answer 2</p>
  </div>
  <div class="answer">
    <p>Answer 3</p>
  </div>
</div>

Alternatively, if you want to explicitly link the elements together, due to HTML structure restrictions for example, then you can use data attributes to specify the relationships between elements:

"use strict";

jQuery(document).ready(function($) {
  $('.question').click(function() {
    $('.question').removeClass('highlighted');
    var target = $(this).addClass('highlighted').data('target');
    $('.answer').hide().filter(target).show();
  });
});

.answer { display: block; }
.answer ~ .answer { display: none; }
.highlighted { background-color: #CC0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-carousel">
  <div class="question" data-target="#answer-01">
    <h4>Question 1</h4>
  </div>
  <div class="question" data-target="#answer-02">
    <h4>Question 2</h4>
  </div>
  <div class="question" data-target="#answer-03">
    <h4>Question 3</h4>
  </div>

  <div class="answer" id="answer-01">
    <p>Answer 1</p>
  </div>
  <div class="answer" id="answer-02">
    <p>Answer 2</p>
  </div>
  <div class="answer" id="answer-03">
    <p>Answer 3</p>
  </div>
 </div>

Answer 2

1. Use a data attribute with the answer id.
2. Add the eventListener to all questions at once using jQuery(".all-questions").click
3. use jQuery('.answer'+jQuery(this).data('answer')).show(); to show current answer. this will use current element.
4. use jQuery(this).addClass("highlighted"); to add the class to current element
5. To add the slide number, use slideNumber = jQuery(this).data('answer');

jQuery(document).ready(function() {

  "use strict";

  jQuery(".all-answers").hide();
  jQuery(".answer1").show();
  jQuery(".all-questions").removeClass("highlighted");
  jQuery(".question1").addClass("highlighted");

  var slideNumber = 1;
  jQuery(".all-questions").click(function() {
    jQuery(".all-answers").hide();
    jQuery('.answer'+jQuery(this).data('answer')).show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(this).addClass("highlighted");
    slideNumber = jQuery(this).data('answer');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-carousel">
  <div data-answer="1" class="all-questions question1">
    <h4>Question 1</h4>
  </div>
  <div data-answer="2" class="all-questions question2">
    <h4>Question 2</h4>
  </div>
  <div data-answer="3" class="all-questions question3">
    <h4>Question 3</h4>
  </div>

  <div class=" all-answers answer1">
    <p>Answer 1</p>
  </div>
  <div class=" all-answers answer2">
    <p>Answer 2</p>
  </div>
  <div class=" all-answers answer3">
    <p>Answer 3</p>
  </div>