Accordion with arrows

by DominoPivot

HTML

<section>
     <h3>Section 1</h3>

    <div class="accordion selected">
        <div class="accordion-header">Accordion 1 <span class="accordion-arrow"></span>

        </div>
        <div class="accordion-body">BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY </div>
    </div>
    <div class="accordion">
        <div class="accordion-header">Accordion 2 <span class="accordion-arrow"></span>

        </div>
        <div class="accordion-body">BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY </div>
    </div>
</section>
<section>
     <h3>Section 2</h3>

    <div class="accordion">
        <div class="accordion-header">Accordion 1 <span class="accordion-arrow"></span>

        </div>
        <div class="accordion-body">BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY </div>
    </div>
    <div class="accordion">
        <div class="accordion-header">Accordion 2 <span class="accordion-arrow"></span>

        </div>
        <div class="accordion-body">BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY </div>
    </div>
    <div class="accordion">
        <div class="accordion-header">Accordion 2 <span class="accordion-arrow"></span>

        </div>
        <div class="accordion-body">BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY...

CSS

.accordion {
    border: solid 1px rgb(220, 220, 220);
    border-radius: 5px;
}
.accordion-header {
    overflow: hidden;
    background-color: rgb(30, 50, 150);
    color: white;
    border-radius: 5px;
    padding: 5px;
    
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    transition: border-radius 1s;
}
.accordion.selected .accordion-header {
    border-radius: 5px 5px 0px 0px;
}
.accordion-body {
    max-height: 0px;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
    
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.accordion.selected .accordion-body {
    max-height: 200px;
    padding: 5px;
}
.accordion-arrow::after {
    content: "►";
}
.accordion.selected .accordion-arrow::after {
    content: "▼";
}

JavaScript

function accordionHeader_onClick(e) {
    var thisAccordion = e.target.parentNode;
    var selectedAccordion = thisAccordion.parentNode.querySelector(".accordion.selected");

    // deselects de selected sister accordion
    // (assuming only one accordion of this block can be opened at once)
    if (selectedAccordion) selectedAccordion.classList.remove("selected");

    // selects current accordion if it wasn't previously selected
    if (thisAccordion !== selectedAccordion) thisAccordion.classList.add("selected");
}

var accordions = document.querySelectorAll(".accordion-header");
for (var i = 0; i < accordions.length; ++i) {
    accordions[i].addEventListener("click", accordionHeader_onClick);
}