JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="mainContainer">  
    <div class="slideContainer">
        <div class="head">Lorem Ipsum</div>
        <div class="slide closed">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a consectetur nisi. Quisque feugiat aliquet ornare. Mauris iaculis erat sit amet nulla posuere vestibulum eget quis nibh. Vivamus eget scelerisque erat, id mollis orci. Mauris euismod odio id nisi euismod condimentum. In diam nunc, ullamcorper in fermentum pharetra, facilisis quis elit. Curabitur interdum, dui non sollicitudin suscipit, augue lectus consectetur augue, eget placerat neque leo id lorem. Proin quis porttitor arcu. In interdum porta mauris sit amet accumsan.
        </div>
    </div>
    <div class="slideContainer">
        <div class="head">Lorem Ipsum</div>
        <div class="slide closed">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a consectetur nisi. Quisque feugiat aliquet ornare. Mauris iaculis erat sit amet nulla posuere vestibulum eget quis nibh. Vivamus eget scelerisque erat, id mollis orci. Mauris euismod odio id nisi euismod condimentum. In diam nunc, ullamcorper in fermentum pharetra, facilisis quis elit. Curabitur interdum, dui non sollicitudin suscipit, augue lectus consectetur augue, eget placerat neque leo id lorem. Proin quis porttitor arcu. In interdum porta mauris sit amet accumsan.
        </div>
    </div>
    <div class="slideContainer">
        <div class="head">Lorem Ipsum</div>
        <div class="slide closed">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a consectetur nisi. Quisque feugiat aliquet ornare. Mauris iaculis erat sit amet nulla posuere vestibulum eget quis nibh. Vivamus eget scelerisque erat, id mollis orci. Mauris euismod odio id nisi euismod condimentum. In diam nunc, ullamcorper in fermentum pharetra, facilisis quis elit. Curabitur interdum, dui non sollicitudin suscipit, augue lectus consectetur augue, eget placerat neque leo id lorem....

CSS

.mainContainer{
    border-bottom: solid 1px #000;
}

.slideContainer, .head, .slide{
    padding: 10px;
    border: solid 1px;
}

.slideContainer:not(last) {
    border-bottom: 0px;
}

.slide{
    display:none;
    border-top: 0px;
}

.head{
    cursor:pointer;
    background: #e5e5e5;
}

JavaScript

$(document).on('click', '.head', function(){
    $slide = $(this).parent().children('.slide'); animSpeed = 400;
    if( $slide.hasClass('opened') ){
        $slide.stop().slideToggle(animSpeed).removeClass('opened').addClass('closed');
    }
    else{
        $('.opened').stop().slideToggle(animSpeed).removeClass('opened').addClass('closed');
        $slide.stop().slideToggle(animSpeed).removeClass('closed').addClass('opened');
    }
});