CODEWITHSUNDEEP
javascriptjquerycsshtml
DayJa Lowe
DayJa Lowe

Reputation: 11

JavaScript toggle one at a time

I need some help with toggling one question at time. I want to display one question and when I click the other question the old one will disappear.

Heading

Here is my code

I am not sure how to get them to show up one at a time I have tried many different ways and still haven't came up with anything.

<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>     
</head>

 <body>
 <main id="faqs">
    <h1>JavaScript FAQs</h1>
    <h2><a href="#" >What is JavaScript?</a></h2>
    <div>
        <p>JavaScript is a is a browser-based programming language 
           that makes web pages more responsive and saves round trips to the 
 server.
        </p>
    </div>
    <h2><a href="#">What is jQuery?</a></h2>
    <div>
        <p>jQuery is a library of the JavaScript functions that you're most 
 likely 
           to need as you develop websites.
        </p>
    </div>
    <h2><a href="#">Why is jQuery becoming so popular?</a></h2>
    <div>
        <p>Three reasons:</p>
        <ul>
            <li>It's free.</li>
            <li>It lets you get more done in less time.</li>
            <li>All of its functions are cross-browser compatible.</li>
        </ul>
    </div>
</main>
</body>
</html>

:

"use strict";
var $ = function(id) { return document.getElementById(id); };

// the event handler for the click event of each h2 element

var toggle = function() {

var h2 = this;                   
// clicked h2 tag     

 var div = h2.nextElementSibling; 
 // h2 tag's sibling div tag

// toggle plus and minus image in h2 elements by adding or removing a class

if (h2.hasAttribute("class")) { 
    h2.removeAttribute("class");    
} else { 
    h2.setAttribute("class", "minus"); 
}

//toggle div visibility by adding or removing a class

if (div.hasAttribute("class")) { 
    div.removeAttribute("class");
} else { 
    div.setAttribute("class", "open"); 
} 
};

Upvotes: 1

Views: 503

Answers (1)

wscourge
wscourge

Reputation: 11281

Do as follows:

  1. Hide all the answers initially with CSS
  2. Save questions and answers to the variables in JS file
  3. Add function which is executed when any of the questions is clicked
    • Hide all the answers
    • Show the answer related to the clicked question

var questions = $("h2 a");
var answers = $("h2 + div");

questions.on("click", function(event) {
  
  event.preventDefault();
  
  var answer = $($(this).attr("href"));
  answers.hide();
  answer.show();

});
h2 + div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main id="faqs">
  <h1>JavaScript FAQs</h1>
  <h2><a href="#q1" >What is JavaScript?</a></h2>
  <div id="q1">
      <p>JavaScript is a is a browser-based programming language 
         that makes web pages more responsive and saves round trips to the 
server.
      </p>
  </div>
  
  <h2><a href="#q2">What is jQuery?</a></h2>
  <div id="q2">
      <p>jQuery is a library of the JavaScript functions that you're most 
likely 
         to need as you develop websites.
      </p>
  </div>
  <h2><a href="#q3">Why is jQuery becoming so popular?</a></h2>
  <div id="q3">
      <p>Three reasons:</p>
      <ul>
          <li>It's free.</li>
          <li>It lets you get more done in less time.</li>
          <li>All of its functions are cross-browser compatible.</li>
      </ul>
  </div>
</main>

Upvotes: 1

Related Questions