JSFiddle - React, Tailwind, and code Playground

by johnnytrinh

HTML

<div class="toggle-button"><a href="#" class="title">I am a Toggle. Click Me!</a></div>
                <div class="toggle-pane">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor vehicula sem nec congue. Nulla sit amet orci sit amet urna pharetra mollis at facilisis risus. Curabitur tempus, risus eu volutpat molestie, mauris quam faucibus felis, porttitor pretium sapien tortor eget velit. Aliquam erat volutpat. Phasellus placerat porta tellus et pellentesque. Phasellus at fermentum nisl. </p>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor vehicula sem nec congue. Nulla sit amet orci sit amet urna pharetra mollis at facilisis risus. Curabitur tempus, risus eu volutpat molestie, mauris quam faucibus felis, porttitor pretium sapien tortor eget velit. Aliquam erat volutpat. Phasellus placerat porta tellus et pellentesque. Phasellus at fermentum nisl. </p>
                </div><!--END toggle-pane-->

CSS

.toggle-button {
    padding: 15px;
    background: #fff;
    border: 1px solid #9e9e9e;
    margin-bottom: -1px;
    margin-top: 23px;
}

.toggle-button a.title {
    display: block;
    width: 100%;
    background: url(images/toggle-off.jpg) no-repeat left center;
    height: 15px;
    text-indent: 25px;
    line-height: 15px;
    text-decoration: none;
}
.toggle-pane {
    background: #fff;
    border: 1px solid #9e9e9e;
    padding: 15px 40px 15px 40px;
    display: none;
}

.active {
    color: red;
}

JavaScript

var $toggle = $('.toggle-button a'),
    $togglePane = $('.toggle-pane');

$toggle.on('click', function() {
    $(this).toggleClass('active').parent().next($togglePane).toggle();
});