Scribd Logo
Upload

Welcome to Scribd!

  • 62 views

    .Accordion:after: Content Font-Size Color Float Margin-Left

    Uploaded by

    Angela Beatrice
    This document describes how to create an accordion component with HTML, CSS, and JavaScript. The accordion allows users to expand and collapse different sections of content. When a section header is clicked, it toggles the "active" class which changes the icon from plus to minus. It also toggles the display style of the corresponding section content from "block" to "none" to show/hide it. An alternative method is provided that uses max-height instead of display to smoothly animate the expansion and collapse of sections.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    .Accordion:after: Content Font-Size Color Float Margin-Left

    Uploaded by

    Angela Beatrice
    62 views3 pages
    This document describes how to create an accordion component with HTML, CSS, and JavaScript. The accordion allows users to expand and collapse different sections of content. When a section header is clicked, it toggles the "active" class which changes the icon from plus to minus. It also toggles the display style of the corresponding section content from "block" to "none" to show/hide it. An alternative method is provided that uses max-height instead of display to smoothly animate the expansion and collapse of sections.

    Original Title

    Accordion

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document describes how to create an accordion component with HTML, CSS, and JavaScript. The accordion allows users to expand and collapse different sections of content. When a section header is clicked, it toggles the "active" class which changes the icon from plus to minus. It also toggles the display style of the corresponding section content from "block" to "none" to show/hide it. An alternative method is provided that uses max-height instead of display to smoothly animate the expansion and collapse of sections.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    62 views3 pages

    .Accordion:after: Content Font-Size Color Float Margin-Left

    Uploaded by

    Angela Beatrice
    This document describes how to create an accordion component with HTML, CSS, and JavaScript. The accordion allows users to expand and collapse different sections of content. When a section header is clicked, it toggles the "active" class which changes the icon from plus to minus. It also toggles the display style of the corresponding section content from "block" to "none" to show/hide it. An alternative method is provided that uses max-height instead of display to smoothly animate the expansion and collapse of sections.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 3

    Accordion

    .accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
    }

    .active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
    }

    <button class="accordion">Section 1</button>


    <div class="panel">
    <p>Lorem ipsum...</p>
    </div>

    <button class="accordion">Section 2</button>


    <div class="panel">
    <p>Lorem ipsum...</p>
    </div>

    <button class="accordion">Section 3</button>


    <div class="panel">
    <p>Lorem ipsum...</p>
    </div>

    .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    }

    /* Add a background color to the button if it is clicked on (add the .active


    class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
    background-color: #ccc;
    }

    /* Style the accordion panel. Note: hidden by default */


    .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    }

    var acc = document.getElementsByClassName("accordion");


    var i;

    for (i = 0; i < acc.length; i++) {


    acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */


    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
    panel.style.display = "none";
    } else {
    panel.style.display = "block";
    }
    });
    }

    <style>
    .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    }
    </style>

    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {


    acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
    }
    </script>

    You might also like