<div class="container">
    <div class="accordion">
        <div class="accordion-item">
            <h3 class="accordion-item__title">Accordion Title #1</h3>
            <div class="accordion-item__content">
                <div class="accordion-item__content-inside">
                    Donec non ultricies eros. Curabitur sit amet dolor scelerisque, dictum mi et, maximus magna. Donec egestas quam et odio tincidunt volutpat. Suspendisse eleifend arcu vitae orci fermentum, venenatis tempor massa porta. Sed eu facilisis felis. Aliquam tincidunt posuere volutpat. Integer egestas mi ac risus vestibulum pharetra. Morbi id mauris quis tellus pharetra pulvinar. Quisque quis fermentum sem.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h3 class="accordion-item__title">Accordion Title #2</h3>
            <div class="accordion-item__content">
                <div class="accordion-item__content-inside">
                    Donec non ultricies eros. Curabitur sit amet dolor scelerisque, dictum mi et, maximus magna. Donec egestas quam et odio tincidunt volutpat. Suspendisse eleifend arcu vitae orci fermentum, venenatis tempor massa porta. Sed eu facilisis felis. Aliquam tincidunt posuere volutpat. Integer egestas mi ac risus vestibulum pharetra. Morbi id mauris quis tellus pharetra pulvinar. Quisque quis fermentum sem.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h3 class="accordion-item__title">Accordion Title #3</h3>
            <div class="accordion-item__content">
                <div class="accordion-item__content-inside">
                    Donec non ultricies eros. Curabitur sit amet dolor scelerisque, dictum mi et, maximus magna. Donec egestas quam et odio tincidunt volutpat. Suspendisse eleifend arcu vitae orci fermentum, venenatis tempor massa porta. Sed eu facilisis felis. Aliquam tincidunt posuere volutpat. Integer egestas mi ac risus vestibulum pharetra. Morbi id mauris quis tellus pharetra pulvinar. Quisque quis fermentum sem.
                </div>
            </div>
        </div>
    </div>
</div>

body {
    background: #f6f6f6;
    font-family: 'IBM Plex Sans', sans-serif;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 40px);
    min-height: calc(100vh - 40px);
    padding: 20px;
}

.accordion {
    width: 600px;
}

.accordion-item {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 7px rgba(0,0,0,0.1);
    margin: 15px 0;
    
    &__title {
        background: #5588fa;
        color: #fff;
        border-radius: 3px;
        text-transform: uppercase;
        font-weight: 400;
        padding: 15px 20px;
        cursor: pointer;
        margin: 0;
        transition: 0.2s ease;
        font-size: 14px;
        
        @media (min-width: 730px) {
            font-size: 18px;
        }
        
        &:hover {
            background: darken(#5588fa, 8%);
            transition: 0.2s ease;
        }
    }
    
    &__content {
        color: rgba(0,0,0,0.65);
        line-height: 1.7em;
        max-height: 0;
        overflow: hidden;
        transition: 0.5s ease;
        font-size: 14px;
        
        @media (min-width: 730px) {
            font-size: 16px;
        }
        
        &.is-open {
            max-height: 600px;
            transition: 0.5s ease;
        }
    }
    
    &__content-inside {
        padding: 15px 20px;
    }
}

var accordions = document.querySelectorAll('.accordion-item');

for (var i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener('click', function(e) {
        this.querySelector('.accordion-item__content').classList.toggle('is-open');
    });
}