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 Display() and Answer() function. Im having a hard time since I'm pretty much new to JavaScript.
Any help would be very much appreciated! Thankyou!
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 class="question" data-target="answer1">
What does JavaScript do?
</div>
<div class="answer" id="answer1">
<!-- ... -->
</div>
function toggleAnswer(e) {
var target = e.target.getAttribute("data-target");
toggleElementById(target);
}
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 class="question">
How do I enable JavaScript Chrome?
</div>
<div class="answer hidden">
<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 class="question">
What do you use JavaScript for?
</div>
<div class="answer hidden">
<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 class="question">
What does JavaScript do?
</div>
<div class="answer hidden">
<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 class="question">
Is it useful to learn JavaScript?
</div>
<div class="answer hidden">
<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>