Showing and Hiding elements using Javascript-CodePudding

So I have to create this program where i need to create a "People also asked for" feature (This will hide the answers by default, and if the questions is clicked, it will show the answer for that specific question), however i don't know how to hide and show elements using my own toggleDisplay() and toggleAnswer() function. Im having a hard time since I'm pretty much new to JavaScript.

Here is my code :

<head>
<script>
  function toggleDisplay(elem) {
    // This is to toggle the display of elem between "block" and "none".
  }

  function toggleAnswer(e) {
    /*
      This is where it will get the question div that was clicked
      and use it to then get the answer div.
      Send the answer div to toggleDisplay().
    */
  }
  window.addEventListener('load', function(e) {
    var questions = document.querySelectorAll('.question');
    for (question of questions) {
      question.addEventListener('click', toggleAnswer);
    }
  });
</script>
<title>People Also Ask</title>
</head>

<body id="people-also-ask">
<main>
  <h1>People also ask</h1>
  <ul id="questions">
    <li>
      <div >
        How do I enable JavaScript Chrome?
      </div>
      <div >
        <p><strong>If you'd like to turn JavaScript off or on for all sites:</strong></p>
        <ol>
          <li>Click the Chrome menu in the top right-hand corner of your browser.</li>
          <li>Select Settings.</li>
          <li>Click Show advanced settings.</li>
          <li>Under the "Privacy" section, click the Content settings button.</li>
        </ol>
      </div>
      
      <div >
        What do you use JavaScript for?
      </div>
       <div >
        <p><strong>Webpages</strong></p>
        <ol>
          <li>JavaScript is commonly used for creating web pages.
          It allows us to add dynamic behavior to the webpage and add special effects to the webpage.
          On websites, it is mainly used for validation purposes.
          JavaScript helps us to execute complex actions and also enables the interaction of websites with visitors.
        </ol>
      </div>
      
      <div >
       What does JavaScript do?
      </div>
       <div >
        <p><strong>JavaScript</strong></p>
        <ol>
          <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.
          (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li>
        </ol>
      </div>
      
      <div >
        Is it useful to learn JavaScript?
      </div>
       <div >
        <p><strong>Why learn JavaScript?</strong></p>
        <ol>
          <li>The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer.
          Even if you haven't got your heart set on a tech career,
          being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today's job market!
        </ol>
      </div>
    </li>
</main></body>

Any help would be very much appreciated! Thankyou!

CodePudding user response：

If answers and questions are correlating you can loop through them while adding listener to either remove or add class with display:none property. See the snippet.

const questions = document.querySelectorAll(".question");
const answers = document.querySelectorAll(".answer");
questions.forEach((question, index) => {
  question.addEventListener("click", () => {
    let answer = answers[index].classList;
    answer.contains("hidden") ? answer.remove("hidden") : answer.add("hidden");
  });
});

.hidden {
  display:none ;
}

<main>
  <h1>People also ask</h1>
  <ul id="questions">
    <li>
      <div >
        How do I enable JavaScript Chrome?
      </div>
      <div >
        <p><strong>If you'd like to turn JavaScript off or on for all sites:</strong></p>
        <ol>
          <li>Click the Chrome menu in the top right-hand corner of your browser.</li>
          <li>Select Settings.</li>
          <li>Click Show advanced settings.</li>
          <li>Under the "Privacy" section, click the Content settings button.</li>
        </ol>
      </div>

      <div >
        What do you use JavaScript for?
      </div>
      <div >
        <p><strong>Webpages</strong></p>
        <ol>
          <li>JavaScript is commonly used for creating web pages.
            It allows us to add dynamic behavior to the webpage and add special effects to the webpage.
            On websites, it is mainly used for validation purposes.
            JavaScript helps us to execute complex actions and also enables the interaction of websites with visitors.
        </ol>
      </div>

      <div >
        What does JavaScript do?
      </div>
      <div >
        <p><strong>JavaScript</strong></p>
        <ol>
          <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.
            (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li>
        </ol>
      </div>

      <div >
        Is it useful to learn JavaScript?
      </div>
      <div >
        <p><strong>Why learn JavaScript?</strong></p>
        <ol>
          <li>The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer.
            Even if you haven't got your heart set on a tech career,
            being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today's job market!
        </ol>
      </div>
    </li>
</main>

CodePudding user response：

The best way to show / hide elements, as you correctly pointed out, is by modifying the CSS attribute display.

Now, in your case I would add a class .hidden that you add to the elements you want to hide. And then to reveal them, you simply remove that class from the respective element.

.hidden {
  display: none;
}

function toggleElementById(elementId) {
  var element = document.getElementById(elementId);
  element.classList.toggle("hidden");
}

If you add an ID to each answer and add a target attribute to the question, you can easily get the target ID from the question element.

<div  data-target="answer1">
  What does JavaScript do?
</div>
<div  id="answer1">
  <!-- ... -->
</div>

function toggleAnswer(e) {
  var target = e.target.getAttribute("data-target");
  toggleElementById(target);
}