JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<div class="accordion">
    <h3 class="acc-header glanceH">At a glance</h3>
    <div class="acc-content glanceC slider" >
        <div class="hero-video">xx
        </div>
    </div>
    <h3 class="acc-header">What we do</h3>
    <div class="acc-content" >
        <div class="hero-video what-we-do">xx
        </div>
    </div>
    <h3 class="acc-header">How we do it</h3>
    <div class="acc-content how" >xx
    </div>
    <h3 class="acc-header">Where we reach</h3>
    <div class="acc-content where" >
    </div>
    <h3 class="acc-header">How</h3>
    <div class="acc-content" >xx
    </div>
</div>

CSS

.acc-header {
    cursor: pointer;
}

.acc-content {
    display: none;
    height: 320px;
}

.acc-active {}

JavaScript

//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.accordion .acc-header').click(function() {
    var first = $('.slider');

    // open peek if clicked, otherwise hide it
    if (first.is('.itsopen')) {
        if ($(this).next().is('.acc-active')) {
            first.removeClass('itsopen').animate({ height: '320px' }, 'slow');
            return;
        } else {
            first.removeClass('itsopen acc-active').slideUp('slow');
        }
    }

    $('.acc-content').removeClass('acc-active');
    $(this).next().addClass('acc-active').toggle('slow');
    $('.acc-content:not(.acc-active').slideUp('slow');
    return false;

}).next().hide();

//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider')
    .css({ height: '0px' })
    .show()
    .animate({ height: '150px' }, 'slow')
    .addClass('itsopen acc-active');