JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<div class="easyAcc frozen">
    <a>Accordion Title</a>
    <div class="inner">
        <p>Here is some inner text for the accordion.</p>
        <p>And some more text to go along with that...</p>
    </div>
</div>

<div class="easyAcc">	
    <a>Accordion Title</a>
    <div class="inner">
        <p>Here is some inner text for the accordion.</p>
        <p>And some more text to go along with that...</p>
        <a href="#">Here is a link</a>
    </div>
</div>

<div class="easyAcc">	
    <a>Accordion Title</a>
    <div class="inner">
        <p>Here is some inner text for the accordion.</p>
        <p>And some more text to go along with that...</p>
    </div>
</div>

<div class="easyAcc">
    <a>Accordion Title</a>
    <div class="inner">
        <p>Here is some inner text for the accordion.</p>
        <p>And some more text to go along with that...</p>
    </div>
</div>

CSS

.easyAcc {
    margin:1em 0 .9em 0;
    padding:.8em .6em;
    background:#e6e6e6;
    border-radius:.5em;
    cursor:pointer;
}.easyAcc > a {
    margin:0;
    padding:0 0 .6em 28px;
    background:url('http://www.southernnewengland.aaa.com/uploads/club1/images/bullet22.png') no-repeat 0 6px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
    color:#333;
    font-weight:bold;
    text-decoration:none;
    display:inline-block;
}.inner {
    margin:0;
    padding:.5em;
    background:#fff;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
    display:none;
    cursor:default;
}

JavaScript

//  ***  USAGE  ***

//  Add any of these optional classes
//  active / dontClose / freeze / frozen

//  ***  Examples  ***
//  <div class="easyAcc freeze">
//  - or -
//  <div class="easyAcc active dontClose">

//  active    - These accs will be open when the page is loaded.
//  dontClose - These accs will stay open.  They will only close if you click on them.
//  freeze    - These accs will open when clicked and then remain frozen.
//  frozen    - These accs will be frozen when the page is loaded.

$(function() {
    $('.easyAcc.active .inner,.easyAcc.frozen .inner').css('display','block');
	$('.easyAcc').not('.easyAcc.frozen').click(function(event) {
        if ($(this).hasClass('freeze')) {
            $(this).children('.inner').slideDown();
            $(this).addClass('frozen');
        }
        var $easyAccTarget = $(event.target).not('.easyAcc > a');
        if (!$easyAccTarget.is('a')) {
        $(this).not('.easyAcc.freeze').children('.inner').animate({
	        opacity:"toggle",
	        padding:"toggle",
	        height:"toggle"
	    },"420");
 $(".easyAcc").not(this).not('.easyAcc.dontClose,.easyAcc.frozen').children('.inner').slideUp();
        }
	});
});