Slide Down Accordion - Pure JS

Sliding accordion with pure JS

by DannyEnglander

HTML

<div class="accordion">

    <h3 class="accordion__title">
        <a href="#">Object 1</a>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing 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.
        </div>
    </h3>
    
    <h3 class="accordion__title">
        <a href="#">Object 2</a>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing 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.
        </div>
    </h3>
    
</div>

CSS

body {
    background: #CCCCCC;
}

.accordion .accordion__title {
    min-height: 38px;
    background: black;
    overflow: hidden;
}

.accordion div {
    color: white;
    padding: 20px;
    transition: margin-top 0.2s;
}

.accordion a {
    position: relative;
    z-index: 1;
    display: block;
    background: white;
    padding: 10px 20px;
}

JavaScript

var accordion = document.getElementsByClassName('accordion').item(0);
    sections = accordion.getElementsByClassName('accordion__title');

function openBelow(el) {
    el.style.marginTop = '0px';
}

function closeBelow(el) {
    el.style.marginTop = -el.offsetHeight + 'px';
}
       
for (var i = 0; i < sections.length; i++) 
{
    (function() {
        var section = sections.item(i),
            anchor = sections.item(i).children[0],
            below = sections.item(i).children[1];
        
        closeBelow(below, -below.offsetHeight);
        
        anchor.onclick = function () {
            if (section.getAttribute('class' ) == 'active' ) {
                section.setAttribute('class', '');
                closeBelow(below);
            }
            else {
                section.setAttribute('class', 'active');
                openBelow(below);
            }
        }
    })();
}