For Questions & Answers

INFORMATION & CODE

For Questions & Answers Page or Section

The provided code creates a sleek, interactive FAQ (Frequently Asked Questions) section for any website. It uses a "collapsible" design, which means the answers are hidden by default and only reveal themselves when a user clicks on the corresponding question. This is a highly effective way to keep a webpage clean and organized while still providing detailed information to the audience.

How it Works

The functionality is driven by a combination of HTML, CSS, and basic JavaScript. The HTML establishes the structure, utilizing specific container classes (faq-page for questions and faq-answer for the hidden content). The CSS handles the visual presentation, including setting the initial display: none property on the answers so they remain hidden. Additionally, the CSS uses pseudo-elements (:after) to change the "✚" icon into a cross symbol ("➖") when a question is clicked, providing immediate visual feedback.

The JavaScript is the engine that makes the interaction possible. It uses a loop to attach a "click" event listener to every question element. When a user clicks a question, the script toggles an active class (for styling) and checks the state of the following div. If the answer is hidden, the script changes its display style to block; if it is already visible, the script hides it again. This creates the smooth "expander" effect that users see on the page.

How to Use It

To implement this on your own website, follow these steps:

Integrate the Styles: Copy the CSS code and add it to your website’s stylesheet or within a <style> block in your document's <head>. This ensures the layout is correct and the icons animate properly.
Add the HTML Structure: Copy the div elements contained within the faq-container and paste them into the body of your website where you want the FAQ section to appear. You can easily add more questions by creating a new <div> following the same structure (a faq-page paragraph followed by a faq-answer div).
Include the Logic: Place the provided JavaScript snippet just before the closing </body> tag of your HTML file, between <script></script> tags, or in your websites .js file. This ensures the page elements are fully loaded before the script tries to attach the click listeners to them.
Customize: You can easily change the fonts, colors, or padding within the CSS block to match your website's existing branding. Because this code uses standard HTML classes, it is highly portable and should look and behave consistently across modern web browsers.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For Questions & Answers</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link rel="stylesheet" href="styles.css">             
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js">crossorigin="anonymous"></script>
  </head>
  <body>
    <h3 class="faq-heading">FAQ Page</h3>
    <div class="faq-container">
      <div class="faq-one">
        <p class="faq-page"><span>Q</span> What is an FAQ Page?</p>
        <div class="faq-answer">
          <p>The FAQ page allows you to place the most frequently asked questions one position on your web page. It allows the                      user to find answers to all their questions in one place, and allow the user to learn more about your website and                       give answers to regular concerns or questions anyone might have.
          </p>
        </div>
      </div>
      <hr class="hr-line">
      <div class="faq-two">
        <p class="faq-page"><span>Q</span> Why do you need an FAQ page?</p>
        <div class="faq-answer">
          <ol>
				    <li>A FAQ page improves the user experience of a website.</li>
				    <li>Also it reduces the time needed to answer regular questions.</li>
				    <li>Allows the user to find answers to all their questions in one place.</li>
				    <li>It is also a source of great ideas for new content.</li>
				  </ol>
        </div>
      </div>
      <hr class="hr-line">
      <div class="faq-three">
        <p class="faq-page"><span>Q</span> Does it improves the user experience of a website?</p>
        <div class="faq-answer">
          <p>The Frequently Asked Questions (FAQ) page can improve user experience. All websites should have an FAQ page because                    it reduces the time your employees need to answer simple questions. It allows visitors to find answers to all their                     questions in one place. And an FAQ page can be a great source of content ideas.
          </p>
        </div>
      </div>
      <hr class="hr-line">
    </div>

CSS


                      :root {
        --bg-color: #f5f5f5;
        --bg-primary: #d1d1d1;
        --bg-secondary: #e0e0e0;
        --border-light: 3px inset #ffffff;
        --border-dark: 2px solid #878787;
        --btn-border: 3px outset #ffffff; 
        --color-light: #878787;
        --color-dark: #444444;
        --shadow: 3px 4px 15px rgba(0, 0, 0, 0.3);
      }

      * {
        box-sizing: border-box;
        font-family: "Press Start 2P", VT323, cursive;
      }

      body {
        height: 98.5vh;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-color);
        font-size: 16px;
        line-height: 1.5;
      }
      .faq-heading{
        border-bottom: #777;
        padding: 20px 60px;
      }
      .faq-container{
        width: 100%;
		    margin: auto;
      }
      .hr-line{
        width: 100%;
        margin: auto;  
      }
      .faq-page {
        color: #444;
        cursor: pointer;
        padding: 30px 20px;
        width: 100%;
        border: none;
        outline: none;
        transition: 0.4s;
        margin: auto;
      }
		  p.faq-page  {
		    color: #000;
		    text-shadow: none;
		    text-align:left;
        font-size: 22px;
        font-weight: 900;
		  }
		  span {
		    color: #777;
		    font-size: 20px;
		    margin-right: 30px;
		  }
      .faq-answer{
        margin: auto;
        width: 100%; 
        padding: auto;   
      }
      .active,.faq-page:hover {
        background-color: #F9F9F9;
      }
      .faq-answer {
        padding: 0 18px;
        background-color: white;
        display: none;
		    font-size: 16px;
        overflow: hidden;
      }

      .faq-page:after {
        content: 'A';
        font-size: 20px;
	      font-weight: 700;
        color: #777;
        float: right;
        margin-left: 5px;
      }

      .active.faq-page:after {
        content: "\2796";
		    font-size: 18px
      }

JAVASCRIPT


                const fqac = document.querySelector(".faq-container");
const faq = document.getElementsByClassName("faq-page");
var i;
      
for (i = 0; i < faq.length; i++) {
  faq[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var answer = this.nextElementSibling;
    if (answer.style.display === "block") {
      answer.style.display = "none";
    } else {
      answer.style.display = "block";
    }
  });
}

PREVIEW

FAQ Page

Q What is an FAQ Page?

The FAQ page allows you to place the most frequently asked questions one position on your web page. It allows the user to find answers to all their questions in one place, and allow the user to learn more about your website and give answers to regular concerns or questions anyone might have.

Q Why do you need an FAQ page?

A FAQ page improves the user experience of a website.
Also it reduces the time needed to answer regular questions.
Allows the user to find answers to all their questions in one place.
It is also a source of great ideas for new content.

Q Does it improves the user experience of a website?

The Frequently Asked Questions (FAQ) page can improve user experience. All websites should have an FAQ page because it reduces the time your employees need to answer simple questions. It allows visitors to find answers to all their questions in one place. And an FAQ page can be a great source of content ideas.

MENU

INFORMATION & CODE