Tech & Fun Zone

Greetings, everyone! Welcome to the Tech and Fun Zone tutorial for today. We'll learn how to create the FAQ Accordion Section using HTML CSS and JavaScript, which Google uses when we type a question and find a list of related questions below the answer. This FAQ Accordion Project will be completed with HTML, CSS, and JavaScript in today's session.

What is FAQ Accordion Section

In Accordion, All of the answers are hidden in the accordion layout, but the answer is shown when you click on the question. It makes the widget small and easy to read, allowing you to write lengthy, in-depth responses and avoiding messy pages. The organization of questions by category makes it simpler for website visitors to locate the information they require.

Benefits Of Using FAQ Accordion

1. In just a few minutes, you can make one or more FAQs.
2. Your FAQs can be designed in any way you want. To customize the layout to your store's specifications, you can select colors, font size, and numerous other options.
3. Choose various colors for the questions and answers.
4. Your frequently asked questions can be installed on any page. By copying and pasting the embed code to the desired location, you can also install your FAQs on the product page.
5. Include images in your responses.
6. Display your FAQs in one of two formats: accordion or tabular form with straightforward questions and answers.

How to Create FAQ Accordion Section using HTML CSS and JavaScript

You can also check the another alternative FAQ Accordion from Here. This accordion is created using the HTML and CSS.

You can simply copy and paste the FAQ Accordion Section Using HTML, CSS, and JavaScript with complete source code into your own project in this blog post. Enjoy your explorations and learning! I hope you have an idea of what the project is about.

Note:
You can use this accordion in blogger, just paste the code in the theme section where you want to show the Accordion Section

1. HTML Section

   We have to use all of the necessary elements and attributes to set up the structure of the FAQ Accordion project using HTML first. This will be our first step to creating FAQ Accordion Section using HTML CSS and JavaScript. Later we will know how to code the CSS portion to include styling and align the tags. Below is the HTML Code, Copy it and paste it where you want to apply it.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ Accordion</title>
    <!--Font Awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <div class="container">
        <div class="wrapper">
            <button class="toggle">
                What is the name of the company?
                <i class="fas fa-plus icon"></i>
            </button>
            <div class="content">
                <p>The name of the company is Tech And Fun Zone.</p>
            </div>
        </div>
        <div class="wrapper">
            <button class="toggle">
                How do find it on Internet?
                <i class="fas fa-plus icon"></i>
            </button>
            <div class="content">
                <p>Search on google Tech And Fun Zonem</p>
            </div>
        </div>
        <div class="wrapper">
            <button class="toggle">
                Does it have a YouTube Channel?
                <i class="fas fa-plus icon"></i>
            </button>
            <div class="content">
                <p>Yes</p>
            </div>
        </div>
    </div>

2. CSS Section

   Second, we have the CSS code, to which we have styled for the FAQ Accordion project's structure. Additionally, we have aligned and positioned the CSS code so that it is properly positioned and does not become cluttered with appropriate CSS elements. Now, let's program the JavaScript component to be responsive.

<style>
.container{
    width: 45%;
    min-width: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.wrapper{
    background-color: #ffffff;
    margin-bottom: 20px;
    padding: 15px 40px;
    border-radius: 24px;
    box-shadow: 2px 4px 11px #c0c0c0, -2px -4px 11px #fff;

}
.toggle,
.content{
    font-family: "Poppins",sans-serif;
}
.toggle{
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #111130;
    font-weight: 500;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px 0;
}
.content{
    position: relative;
    font-size: 14px;
    text-align: justify;
    line-height: 30px;
    height: 0;
    overflow: hidden;
    transition: all 1s;
  }
.wrapper:hover {
box-shadow: inset 3px 5px 10px #c0c0c0, inset -3px -5px 10px #fff;
border: 2px solid rgba(255, 255, 255, 0.2);
font-size: 13px;
}
  .drK  .wrapper{background:#1f1f1f}
.drK  .wrapper{background:#2c2d31}
.drK  .toggle{color:#ffffff}
.drK  .wrapper{box-shadow: 2px 4px 11px #1f1f1f, -2px -4px 11px #000;}
.drK  .wrapper:hover {
box-shadow: inset 3px 5px 10px #1f1f1f, inset -3px -5px 10px #000;
border: 2px solid rgba(31, 34, 38 0.2);
font-size: 16.9px;
}</style>

3. JavaScript Section

   The final phase of the project was JavaScript, to which we added logic and coded in accordance with the requirements, subject to a few conditions. Additionally, we have developed functions that contain the answers and will display them following the user's action. Let us look at the final FAQ Accordion Section using HTML CSS and JavaScript (Source Code).

    <script>let toggles = document.getElementsByClassName('toggle');
let contentDiv = document.getElementsByClassName('content');
let icons = document.getElementsByClassName('icon');

for(let i=0; i<toggles.length; i++){
    toggles[i].addEventListener('click', ()=>{
        if( parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight){
            contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
            toggles[i].style.color = "#0084e9";
            icons[i].classList.remove('fa-plus');
            icons[i].classList.add('fa-minus');
        }
        else{
            contentDiv[i].style.height = "0px";
            toggles[i].style.color = "#111130";
            icons[i].classList.remove('fa-minus');
            icons[i].classList.add('fa-plus');
        }

        for(let j=0; j<contentDiv.length; j++){
            if(j!==i){
                contentDiv[j].style.height = "0px";
                toggles[j].style.color = "#111130";
                icons[j].classList.remove('fa-minus');
                icons[j].classList.add('fa-plus');
            }
        }
    });
}</script>

 Preview

See the Pen FAQ Accordion by Thoda-sa-pagal (@thoda-sa-pagal) on CodePen.

Using HTML, CSS, and JavaScript, we were able to create our FAQ Accordion with success. This project FAQ Accordion Section using HTML CSS can be used for your own purposes, and the code for each line can be found at the code pen link above. If you found this blog to be useful, you should follow the Instagram page of Tech and Fun Zone. Many thanks to You And Cheerful Learning!!!

Final Words

I hope this Article How to Create FAQ Accordion Section using HTML CSS and JavaScript would be helpful for you. If you want any more information like this article. Please follow our Tech & Fun Zone on Telegram Channel for updates.

Hopefully, the Above tutorial has completely helped you to learn How to Create FAQ Accordion Section using HTML CSS and JavaScript If you have got any issues in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

Go to Link

© Tech & Fun Zone