javascript - How do I create a showhide loop in jQuery?

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!

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!

Share Improve this question asked Aug 18, 2017 at 9:44 Ricky Bailey 1332 silver badges7 bronze badges

by referencing to eachother. Eg. try to add data-xxx attributes to the questions – 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 Commented Aug 18, 2017 at 9:48
You could do something like this – billyonecan Commented Aug 18, 2017 at 9:53

Add a ment |

5 Answers 5

Sorted by: Reset to default 6

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 mon 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./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./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>

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./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>

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");
}

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');
});

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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I create a showhide loop in jQuery? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)