JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="accordion">
    <div class="title"> Title <span class="arrow">&#x25BC;</span></div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt vel nisi et blandit. Nulla tristique sagittis imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu turpis vitae mauris accumsan rutrum. Fusce vel tempus risus, at viverra arcu. Nam id erat in purus eleifend ullamcorper vel nec odio. Nam at ultrices turpis. Pellentesque tempor arcu sit amet augue porttitor malesuada. Aliquam pulvinar at est eget placerat. Aenean hendrerit sem non lacus dictum vehicula. Pellentesque pulvinar vehicula ante, a pretium sem venenatis vitae. Morbi ut gravida massa, euismod sagittis purus. Aliquam volutpat ultricies mi quis laoreet.
    </div>
</div>

<div class="accordion">
    <div class="title"> Title <span class="arrow">&#x25BC;</span></div>
    <div class="content">
        Some Content
    </div>
</div>

CSS

.accordion {
    width:50%;
    margin:10px auto; 
    border:1px #dddddd solid;
    border-radius:5px;
}

.accordion .title, .accordion .content {
    padding:10px;
}

.accordion .title {
   background-color:#e3e2de; 
   border-radius: 5px 5px 0 0;
   border-bottom:1px #dddddd solid;
   background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#e3e2de));
   cursor:pointer;
}

.accordion .title.no-border {
    border-bottom:none;
}

.accordion .content {
    background-color:#eeeeee;
    border-radius: 0 0 5px 5px;
}
    
.arrow {
    float:right;
}

JavaScript

(function ( $ ) {
 
    $.fn.accordions = function( options ) {
        return this.each(function() {
            var titleBar = $('.title', this);
            var upArrow = '&#x25B2';
            var downArrow = '&#x25BC';
            
            titleBar.on('click', function() {
                var parent = $(this).parents('.accordion');
                var arrow = $('.arrow', this);
                var content = $('.content', parent);        
                $(this).toggleClass('no-border');
                arrow.html((content.is(':visible')) ? upArrow : downArrow);        
                content.slideToggle(500);
            });
        });     
    };   
 
}( jQuery ));

$(function() { 
    $('.accordion').accordions();
});