How to Add Accordion in Blogger Using HTML ,CSS & JavaScript

In this post, I'll show you how to add accordion in blogger using HTML, CSS and JavaScript . Accordion is a type of box widget that made unique panels that can be expanded or collapsed. Website visitors can view one panel or multiple panels associated with the same subject in the accordion. This widget could be used in blogger blog to show more topic and information about your blog in separate accordion.

So Let's Start

Step1) First of all Visit Blogger.com Dashboard Website

Step2) In Blogger go to the Theme section >> Customize >> Edit HTML

Step3) Now Search

tag and paste this code in-between of tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

Step4) Now Search ]]>/b:skin tag and Paste this CSS Code before the ]]>/b:skin tag

.containerwidth {
            width: 100%;
        }

        .wrapper {
            background-color: #ffffff;
            padding: 10px 20px;
            margin-bottom: 20px;
            border-radius: 5px;
            -webkit-box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
            box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
        }

        .toggle,
        .content {
            font-family: "Poppins", sans-serif;
        }

        .toggle {
            width: 100%;
            background-color: transparent;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            font-size: 16px;
            color: #111130;
            font-weight: 600;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 10px 0;
        }
        .content {
            position: relative;
            font-size: 14px;
            text-align: justify;
            line-height: 30px;
            height: 0;
            overflow: hidden;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
        }

Step4) Now Search tag & Paste this JAVASCRIPT code before tag.

<script>
          //<![CDATA[
        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 = 0;
                        toggles[j].style.color = "#111130";
                        icons[j].classList.remove("fa-minus");
                        icons[j].classList.add("fa-plus");
                    }
                }
            });
        }
//]]>
    </script>

Step5) Now Copy This HTML Code and Paste this code where you have to show FAQs Accordion in blogger Posts.

<div class="boxaccordion">
        <div class="containerwidth">
            <div class="wrapper">
                <button class="toggle">How FAQs Accordion help us to rank our website?<i class="fas fa-plus icon"></i></button>
                <div class="content">
                    <p>FAQs accordion is a great way to help you build authority and trust, and at the same time bestow a bit of personality on the website. It also helps you answer frequently asked questions, produce additional content quickly, and reduce bounce rates.</p>
                </div>
            </div>
            <div class="wrapper">
                <button class="toggle">What is the benefits of FAQs Accordion in blogger?<i class="fas fa-plus icon"></i></button>
                <div class="content">
                    <p>Benefit of FAQs accordion  for blogger is that it helps your blog visitors to find what they are looking for in less time.</p>
                </div>
            </div>
            <div class="wrapper">
                <button class="toggle">Does FAQs Scheme Help Us to Rank our Site in Top Position?<i class="fas fa-plus icon"></i></button>
                <div class="content">
                    <p> Yes, Frequently Asked Questions scheme will make your website more popular and increase your search engine ranking position.</p>
                </div>
            </div>
        </div>
    </div>

Step6) Now Save the Posts.

Hopefully you have successfully Insert FAQs Accordion in blogger.

If you want to Read like these Posts Stuff then visit our website here