JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<script src="http://michaelkeck.de/projects/jquery/_jscripts/jquery/jquery-ui-togglebox.js"></script>
<script src="http://gist.github.com/raw/600508/6df1faca25fccd58bea8641b7a32b4df55ec6249/jquery-cookie.js"></script>
<div id="toggleboxes">
    
    <h3>This is a header</h3>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non interdum sem. Cras egestas imperdiet rhoncus. Nam vel purus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
    
    <h3>This is another header</h3>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non interdum sem. Cras egestas imperdiet rhoncus. Nam vel purus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>

    <h3>This is the last header</h3>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non interdum sem. Cras egestas imperdiet rhoncus. Nam vel purus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>

</div>

CSS

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Component containers
----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #fff url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Interaction...

JavaScript

$(function(){
$('#toggleboxes').toggleboxes({
    header: 'h3',
    active: 0
});
});