CODEWITHSUNDEEP
jquery
Br34th7aking
Br34th7aking

Reputation: 89

How can I display elements of a hidden class one at a time?

I am trying to build a quiz in jquery such that the user sees only one question at a time. I have populated the 'divs' using PHP. I can hide the list of questions with: $(".questions).hide();

But when I select the id of any element inside the hidden class, it is not displayed.

Here's a dummy HTML:

$(document).ready(function() {

  $(".questions").hide();
  $("#question1").show(); // this is not working.


  $(".option").click(answeredQuestionBox);
  $(".check-box").click(reviewQuestionBox);

});
<div class="questions">
  <div id="question1">
    // question goes here with 'radio' input options.
  </div>
</div>

Upvotes: 0

Views: 35

Answers (1)

Satpal
Satpal

Reputation: 133403

You need to hide the child div of questions element.

$(".questions > div").hide(); //$(".questions").children("div").hide()
$("#question1").show();

I would recommend you to assign a CSS class to question.

<div class="questions">
  <div class="question" id="question1">
      // question goes here with 'radio' input options.
  </div>
</div>

then you can use 

$(".questions > div.questions").not("#question1").hide();

Upvotes: 2

Related Questions