Accordion

Each accordion item's body is hidden by default. Use .active class name with .accordion-item to make it visible.

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-item-title">Accordion title one</div>
        <div class="accordion-item-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, consectetur provident officia. Minus perspiciatis iure temporibus facere ratione corporis minima similique iusto aspernatur nemo animi nobis tempora, placeat ducimus totam!</p></div>
    </div>
    <div class="accordion-item active">
        <div class="accordion-item-title">Accordion title two</div>
        <div class="accordion-item-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, consectetur provident officia. Minus perspiciatis iure temporibus facere ratione corporis minima similique iusto aspernatur nemo animi nobis tempora, placeat ducimus totam!</p></div>
    </div>
    <div class="accordion-item">
        <div class="accordion-item-title">Accordion title three</div>
        <div class="accordion-item-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, consectetur provident officia. Minus perspiciatis iure temporibus facere ratione corporis minima similique iusto aspernatur nemo animi nobis tempora, placeat ducimus totam!</p></div>
    </div>
</div>

I have added little jQuery code to make it work.

$('.accordion-item').click(function(event) {
    event.preventDefault();

    $(this).closest('.accordion').find('.accordion-item').removeClass('active');
    $(this).addClass('active');
});

SASS

Reference from _accordion.scss

$accordion-border-color: rgba(map-get($colors, dark), 0.1);