JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://fonts.googleapis.com/css?family=Dosis:300,400,500|Roboto"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<div class="wrapper">

	<h2>Just an example</h2>
	
	<ul class="accordion">
		<li>
			<a href="#">Donec quis interdum.</a>
			<div>
				<p>
					Nullam pulvinar iaculis massa ac elementum. Etiam mollis enim id dolor vestibulum imperdiet. Maecenas purus arcu, ultrices in faucibus eget, posuere eget arcu.
				</p>
				<p>
					Sed volutpat massa mauris, id tristique nulla semper eget. Nulla gravida dolor eu lectus efficitur, nec luctus libero sollicitudin. Vestibulum ut lacus odio. Sed egestas malesuada lorem, ut scelerisque quam volutpat sit amet. 
				</p>
			</div>
		</li>
		<li>
			<a href="#">Sed ut metus non.</a>
			<div>
				Maecenas tempus eros quis ligula varius, sit amet faucibus odio ultrices. Morbi quis tristique nisl, sit amet finibus tellus. Etiam varius sapien erat, vitae mattis est iaculis in. Nam in sapien condimentum, iaculis leo ut, bibendum diam. Phasellus lacinia nisi justo, quis dignissim ligula accumsan id. Sed varius pretium lacus, non suscipit ipsum commodo quis. Donec tempor lacus ac blandit dictum. Ut lectus lacus, euismod at efficitur non, laoreet id leo.
			</div>
		</li>
		<li>
			<a href="#">Quisque quis.</a>
			<div>
				Vivamus fermentum leo ac erat facilisis faucibus. Nam porta quam ut orci malesuada, eu aliquam mauris tempus. Mauris in ornare arcu. Praesent condimentum nibh quis pretium facilisis. Ut viverra vestibulum mi. Suspendisse eu felis quis leo laoreet pharetra. 
			</div>
		</li>
		<li>
			<a href="#">Nullam hendrerit tempor nisl, eget tincidunt.</a>
			<div>
				Curabitur suscipit sollicitudin dui, non tincidunt ipsum euismod ac. Morbi consequat auctor diam vitae mattis. Vivamus iaculis commodo felis quis pulvinar. Donec...

SCSS

$background-color: #fd9a33;
$text-color: #fff;
$accordion-text-color: $background-color;

html {
	background: $background-color;
	font-family: 'Roboto', sans-serif;
}

body, body a {
	color: $text-color;
}

.wrapper {
	max-width: 500px;
	margin: 100px auto;
	text-align: center;
	
	h2 {
		font-size: 25px;
		margin-bottom: 20px;
	}
}


.accordion {
	box-shadow: 0 2px 5px darken( $background-color, 20 ), 0 10px 55px darken( $background-color, 12 );
	text-align: left;
	background: #fff;
	color: $accordion-text-color;

	a {
		color: $accordion-text-color;
	}
	
	> li {
		border-bottom: 1px solid #e1e1e1;
	}

	> li > a {
		font-family: 'Dosis', sans-serif;
		font-size: 18px;
		display: block;
		color: $accordion-text-color;
		background: #f9f9f9;
		text-decoration: none;
		padding: 18px 15px;
	}
	
	> li > div {
		color: grayscale( $accordion-text-color );
		font-size: 13px;
		font-weight: 300px;
		padding: 30px;
	}
	
	> li > div p {
		margin: 10px 0px;
	}
	
	.icon-container {
		float: right;
		position: relative;
		
		> i {
			position: absolute;
			top: 0;
			right: 0;
			font-size: 12px;
			margin-top: 6px;
		}
		
		.fa-plus {
			
		}
		.fa-minus {
			display: none;
		}
	}
}

JavaScript

var o, 
accordion = {
	
	options: {
		button: $(".accordion > li > a"), // Title/button
		active: "active", // Class used to identify title of the open accordion item.
		speed: 320, // Animation speed ( milliseconds ).
		easing: true, // Adds elasticity to the animation.
		collapse: true, // Collapses any open accordion items automatically when adding a new one.
	},
	
	init: function() {
		
		o = this.options;
		
		o.button.next().hide();
		
		// Changes easing to a value jquery easing understands.
		o.easing = ( o.easing === true ) ? "easeOutBounce" : "swing";
		
		$this = this;
		
		$this.plusMinusIcon();
		
		o.button.on("click", function() {

			var _this = $(this);
			$this.event_click( $this, _this );
			
		});
		
	},
	
	event_click: function( $this, _this ) {
			
		if ( !_this.hasClass( o.active ) ) {

			if ( o.collapse === true ) { 
				$this.collapse(); 
			}
			_this.addClass( o.active );
			_this.next().stop().slideDown( o.speed, o.easing );
			_this.find(".fa-plus").hide().next().show();

		} else {

			_this.removeClass( o.active );
			_this.next().stop().slideUp( o.speed, o.easing );
			_this.find(".fa-minus").hide().prev().show();

		}

	},
	
	collapse: function() {
	
		var active_elem = $(".accordion ." + o.active);

		active_elem.removeClass( o.active );
		active_elem.find('.fa-minus').hide();
		active_elem.find('.fa-plus').show();
		active_elem.next('div').slideUp( o.speed, o.easing );
	
	},
	
	plusMinusIcon: function() {

		var icon_html = '<div class="icon-container"> \
							<i class="fa fa-plus" aria-hidden="true"></i> \
							<i class="fa fa-minus" aria-hidden="true"></i> \
						</div>';
						
		o.button.append( icon_html );
		
	},
	
};

accordion.init();