How to create Accordion using html, css and javascript. So that one open at a time and when open the page first one should opened by default

Question

I have created an accordion using following code -

HTML:

<button class="accordion">C/C++</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
       ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
       laboris nisi ut aliquip ex ea commodo consequat.
     </p>
</div>

<button class="accordion">JAVA</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </p>
</div>

CSS:

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

.active, .accordion:hover {
    background-color: #ccc;
}

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

JavaScript:

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";
        } 
    });
}

It gives output like this-

But I want to first one should open when open the page by default and only one should open at a time. Like this -

And there should be + sign at last open it closed and - when it opened.

Answer 1

Try to run the code snippet. you may need to change CSS style.

 [name="accordion-group"]{ display: none; }.element-list{ margin-left: 0; padding-left: 0; list-style-type: none; }.accordion-group label{ color: #666; cursor: pointer; }.accordion-group label:hover{ color: #C85A17; }.accordion-toggle:before{ content: "▶ "; }.accordion-toggle::before{ content: "▶ "; } [name="accordion-group"] ~.accordion-h.accordion-toggle{ display: block; } [name="accordion-group"]:checked ~.accordion-h.accordion-toggle{ display: none; }.accordion-dismiss:before{ content: "▼ ";important. }:accordion-dismiss::before{ content; "▼ ".important: } [name="accordion-group"] ~ h4;accordion-dismiss{ display: none. } [name="accordion-group"]:checked ~ h4;accordion-dismiss{ display. block: };accordion-body{ border-bottom: 1px solid #CC6600; height: auto; max-height: 0; overflow: hidden, background-color, hsla(0, 0%. 100%; :25); box-shadow: 0 2px 2px #CC6600 inset. -webkit-transition; max-height:2s ease 0s. transition; max-height.25s ease 0s: }.accordion-group li:last-child;accordion-body{ border-bottom-width: 1. } [name="accordion-group"]:checked ~;accordion-body{ max-height: 660px. transition-duration; .75s: }.accordion-inner{ padding; 0.631100639515315em 2%; }

 <div> <input checked="checked" id="collapse-all" name="accordion-group" type="radio" /> <ul class="accordion-group element-list"> <li> <input id="collapse-1" name="accordion-group" type="radio" checked/> <h4 class="accordion-h"> <label class="accordion-dismiss" for="collapse-all">C++</label> <label class="accordion-toggle" for="collapse-1">C++</label> </h4> <div class="accordion-body"> <div class="accordion-inner"> <span>Content</span></p> </div> </div> </li> <li> <input id="collapse-2" name="accordion-group" type="radio" /> <h4 class="accordion-h"> <label class="accordion-dismiss" for="collapse-all">JAVA</label> <label class="accordion-toggle" for="collapse-2">JAVA</label> </h4> <div class="accordion-body"> <div class="accordion-inner"> Content </div> </div> </li> </ul> </div>

Answer 2

• The + and - icons in the Accordion heading can be added using CSS content attribute .

• Expansion and contraction of the accordion panels can be controlled by changing the 'height' attribute through Javascript.

Here is an example of working code to show the icons and to control the expansion of the acordion:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Accordion - demo</title>
        <style>
            .accordion {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
            }

            .active, .accordion:hover {
                background-color: #ccc;
            }

            .accordion:after {
                content: '\002B';
                color: #777;
                font-weight: bold;
                float: right;
                margin-left: 5px;
            }

            .active:after {
                content: "\2212";
            }

            .panel {
                padding: 0 18px;
                background-color: white;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
            }
        </style>
    </head>
    <body>
        <button class="accordion">C / C++</button>
        <div class="panel">
            <p>C programming</p>
            <br>
            <p>C++ programming</p>
        </div>

        <button class="accordion">Java</button>
        <div class="panel">
            <p>Java programming</p>
        </div>

        <button class="accordion">Javascript</button>
        <div class="panel">
            <p>Javascript programming</p>
        </div>
        <script>
            var accordions = document.getElementsByClassName("accordion");

            for (var i = 0; i < accordions.length; i++) {
                accordions[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>
    </body>
</html>

Output:

More information:

https://www.w3schools.com/howto/howto_js_accordion.asp