JSFiddle - React, Tailwind, and code Playground

An easy, multi-level jQuery accordion

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="wrapper">
    <h1>An easy, multi-level jQuery accordion</h1>
    <div id="accordion">
        <div class="level">
            <a href="#" class="opening">One</a>
            <div class="expanded">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                <div class="level">
                    <a href="#" class="opening">One -  One</a>
                    <div class="expanded">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                    <a href="#" class="opening">One - Two</a>
                    <div class="expanded">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>    
                </div>
            </div>
    
            <a href="#" class="opening">Two</a>
            <div class="expanded">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin:0;
    padding:0;
    font-family: 'Yanone Kaffeesatz';
    font-size:1em;
    color:#333;
}
p {
    margin:0;
}

#accordion {
    box-shadow:0 0 5px rgba(47,48,64,1);
    -moz-box-shadow:0 0 5px rgba(47,48,64,1);
    -webkit-box-shadow:0 0 5px rgba(47,48,64,1);
}
.wrapper {
    width:600px;
    margin:0 auto;
}
.level {
    border-top:1px solid #2f3040;
}
h1 {
    font-size:1.3em;
    text-align:center;
    margin:10px auto;
}

a.opening {
    font-family: 'Yanone Kaffeesatz';
    display:block;
    padding:3px 30px;
    text-decoration:none;
    color:#2f3040;
    font-weight:bold;
    font-size:1.2em;
    border-bottom:1px solid #2f3040;
    border-left:1px solid #2f3040;
    border-right:1px solid #2f3040;
}

a.opening:hover, a.active {
    color:#fff;
    background: #2f3040;
}
.expanded {
    padding:15px;
    font-size:1em;
    letter-spacing:.05em;
    border-bottom:1px solid #2f3040;
    border-left:1px solid #2f3040;
    border-right:1px solid #2f3040;
}
.expanded p {
    padding-bottom:20px;
}
.expanded .expanded {
    padding:0;
}
.expanded .expanded p {
    padding:15px;
}
ul.support {
    font-size:0.9em;
}

JavaScript

$(function(){
    $("#accordion .expanded").hide();
    $("a.opening").click(function(){
        $(this).next().slideToggle('fast', function(){
            $(this).prev("a.opening").toggleClass("active");
            });
        return false;
    });
});