JSFiddle - React, Tailwind, and code Playground

by basmaat

HTML

<script src="http://www.designchemical.com/lab/wp-content/themes/dclab/js/jquery.cookie.js"></script>
<script src="http://www.designchemical.com/lab/wp-content/themes/dclab/js/jquery.hoverIntent.minified.js"></script>
<script src="http://www.designchemical.com/lab/wp-content/themes/dclab/js/jquery.dcjqaccordion.2.6.min.js"></script>
<link rel="stylesheet" href="http://www.designchemical.com/lab/wp-content/themes/dclab/css/dcaq-menu/skins/black.css">
<link rel="stylesheet" href="http://www.designchemical.com/lab/wp-content/themes/dclab/css/dcaq-menu/skins/graphite.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/firebug1.4/content/firebug-lite-dev.js"></script>
<div class="graphite demo-container">
<ul class="accordion" id="accordion-1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Mobile Phones &#038; Accessories</a>
                <ul>
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                </ul>
            </li>
            <li><a href="#">Desktop</a>
                <ul>
                    <li><a href="#">Product 4</a></li>
                    <li><a href="#">Product 5</a></li>
                    <li><a href="#">Product 6</a></li>
                    <li><a href="#">Product 7</a></li>
                    <li><a href="#">Product 8</a></li>
                    <li><a href="#">Product 9</a></li>
                </ul>
            </li>
            <li><a href="#">Laptop</a>
                <ul>
                    <li><a href="#">Product 10</a></li>
                    <li><a href="#">Product 11</a></li>
                    <li><a href="#">Product 12</a></li>
                    <li><a href="#">Product 13</a></li>
                </ul>
            </li>
            <li><a href="#">Accessories</a>
                <ul>
                    <li><a href="#">Product...

CSS

/* Page */
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
ul, ul li{list-style: none;}
ul.text {margin-bottom: 1em; line-height: 1.5em;}
.text-center {text-align: center;}
body {font: normal 13px Arial, sans-serif;}
h2 {font: normal 26px Arial, sans-serif; padding: 20px 0; margin: 0 0 30px 0;}
.wrap {width: 960px; margin: 0 auto;}
.demo-container {padding: 20px; float: left; width: 260px;}
.demo-container h4 {font-size: 14px; margin: 0 0 5px 0;}
.clear {clear: both;}

.dcjq-count {float: right;}

JavaScript

jQuery(document).ready(function($) {
    jQuery('#accordion-1').dcAccordion({
                        eventType: 'click',
                        autoClose: true,
                        saveState: true,
                        disableLink: true,
                        speed: 'slow'
                    });
});