Some use cases on websites require FAQ accordions or other dropdown lists incorporated in them. One dilemma with this is how to hide the dropdown value or info.
In this Answer, we'll learn how to hide the dropdown value using JavaScript. But first, we'll build an FAQ accordion to illustrate the dropdown.
In the HTML section, create a div with the class of the box container. Proceed to create three div tags with container classes, each containing two classes—one for the question and one for the answer.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --><title> FAQ Accordion </title><link rel = "stylesheet" href = "style.css"><script src= "app.js" defer></script></head><body><section><div class="box-container"><div class="container"><div class="question"> What is Maji Warriors?</div><div class="answer">Maji Warriors is a swimming club that trainskids the age of 15 so as to take part in swimming competitions.</div></div><div class="container"><div class="question"> Who can sign up as a team member?</div><div class="answer">All kids below the age of 15 can join our swimming clubfor exceptional training.</div></div><div class="container"><div class="question"> What are your charges?</div><div class="answer">We have pocket friendly prices and you can send us anemail to see the comprehensive payment plan.</div></div></div></section>
Before adding the JavaScript functionality, custom CSS will help hide the answers by default, which are only displayed when needed.
We can then add the ::before selector that allows us to toggle between a + and - when displaying the dropdown.
body {background-color: aquamarine;}.answer {color: red;background-color: white;display: none;}.question::before {position: relative;font-size: right;margin-left: 5px;content: "+";color: green;}.active:before {content: "-";}.box-container {width: 450px;height: 200px;padding: 40px 40px;background-color: white;}
To make the accordion functional, create a variable that selects every question class name using DOM.
We can then create a for loop that iterates over each question and listens for a click event. When a user clicks on a question, a JavaScript function activates the answer dropdown. A subsequent click on the same question hides the dropdown, as expected.
This is achieved by creating an if/else conditional statement to hide and display the content as required.
import "./styles.css";const dropdown = document.getElementsByClassName("question");for (let i = 0; i < dropdown.length; i++) {dropdown[i].addEventListener("click", function () {this.classList.toggle("active");let answers = this.nextElementSibling;if (answers.style.display === "block") {answers.style.display = "none";} else {answers.style.display = "block";}});}
Let's execute the code snippet in a suitable environment to experience the application.
In conclusion, we learned how to hide dropdown values in a website using JavaScript.