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!

by referencing to eachother. Eg. try to add data-xxx attributes to the questions — giorgio
– giorgio, Commented Aug 18, 2017 at 9:47
Thanks giorgio, although I am very new to jQuery - could you provide an example? I appreciate your time. — Ricky Bailey
– Ricky Bailey, Commented Aug 18, 2017 at 9:48

Rory McCrossan · Accepted Answer · 2017-08-18 09:53:42Z

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>

Sagar V · Accepted Answer · 2017-08-18 09:54:36Z

Use a data attribute with the answer id.
Add the eventListener to all questions at once using jQuery(".all-questions").click
use jQuery('.answer'+jQuery(this).data('answer')).show(); to show current answer. this will use current element.
use jQuery(this).addClass("highlighted"); to add the class to current element
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>

Shardj · Accepted Answer · 2017-08-18 09:56:42Z

0

Give all questions and answer elements a data-number attribute with the correct number then use

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

answered Aug 18, 2017 at 9:56

Shardj

1,9733 gold badges19 silver badges47 bronze badges

Comments

Roamer-1888 · Accepted Answer · 2017-08-18 10:08:01Z

0

With no changes to the HTML, something like this should do it :

jQuery(function ($) {
    "use strict";
    $('.all-questions').on('click', function() {
        $('.all-answers').hide().filter('.answer' + $(this).index()).show();
        $('.all-questions').removeClass('highlighted').filter(this).addClass('highlighted');

    });

    $(".question1").trigger('click');
});

edited Aug 18, 2017 at 10:08

answered Aug 18, 2017 at 10:01

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

Comments

Jason Krs · Accepted Answer · 2017-08-18 10:22:42Z

Try this one. Very simple. The trick I used is to associated every question class name with it's answers class name. For instance, if Question 1 class name is question1, its answer class name is question1_answer. After that let the magic happen (you can add your style however you want. Just copy/paste and run that code an see what it does.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script>

        function myFunction(classname){

            var answerClassName = "." + classname + '_answer';
            $(answerClassName).show();

            //Hide all other answers
            var otherAnswers = document.body.getElementsByTagName("div");
            var l = otherAnswers.length;

            for(i=0 ; i<l ;i++){

                if(otherAnswers[i].className == classname){
                    //do nothing
                }else{
                    var otherAnswersClassName = "." + otherAnswers[i].className + '_answer';
                    jQuery(otherAnswersClassName).hide();
                }
            }
        }

        </script>

    </head>

    <body>
        <div class="question1" onclick="myFunction(this.className)">
            <h4>Question 1</h4>
        </div>

        <div class="question1_answer">
            <p>Answer 1</p>
        </div> 

        <div class="question2" onclick="myFunction(this.className)">
            <h4>Question 2</h4>
        </div>

        <div class="question2_answer">
            <p>Answer 2</p>
        </div> 
    </body>

</html>

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related