JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="http://github.com/jquery/jquery-ui/raw/1.8.2/ui/jquery.ui.core.js"></script>
<script src="http://github.com/jquery/jquery-ui/raw/1.8.2/ui/jquery.ui.widget.js"></script>
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        Content Section 1: Parent
        <div id="accordion2">
            <h4><a href="#">SubSection 1</a></h4>
            <div>content section 1: child</div>
            <h4><a href="#">SubSection 2</a></h4>
            <div>content section 2: child</div>
            <h4><a href="#">SubSection 3</a></h4>
            <div>content section 3: child</div>
            <h4><a href="#">SubSection 4</a></h4>
            <div>content section 4: child</div>
        </div>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        Content Section 2: Parent
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        Content Section 3: Parent
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        Content Section 4: Parent

        <button type="button" class="get-index ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
            <span class="ui-button-text">index</span>
        </button>

    </div>
</div>

JavaScript

/*
 * jQuery UI Accordion @VERSION
 *
 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI/Accordion
 *
 * Depends:
 *    jquery.ui.core.js
 *    jquery.ui.widget.js
 */
(function($) {

$.widget("ui.accordion", {
    options: {
        active: 0,
        animated: 'slide',
        autoHeight: true,
        clearStyle: false,
        collapsible: false,
        event: "click",
        fillSpace: false,
        header: "> li > :first-child,> :not(li):even",
        icons: {
            header: "ui-icon-triangle-1-e",
            headerSelected: "ui-icon-triangle-1-s"
        },
        navigation: false,
        navigationFilter: function() {
            return this.href.toLowerCase() == location.href.toLowerCase();
        }
    },
    _create: function() {

        var o = this.options, self = this;
        this.running = 0;

        this.element.addClass("ui-accordion ui-widget ui-helper-reset");
        
        // in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
        this.element.children("li").addClass("ui-accordion-li-fix");

        this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
            .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
            .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); })
            .bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); })
            .bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); });

        this.headers
            .next()
                .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");

        if ( o.navigation ) {
            var current = this.element.find("a").filter(o.navigationFilter);
            if (...