JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<a class="accordion-expand-all" href="#" target="_self">Open/Close All</a>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
        <li><a href="#tabs-4">Tab 4</a></li>
    </ul>
    <div id="tabs-1">
        <div id="accordion">
            <h3>Accordion 1-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 1-2</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 1-3</h3>
            <div>
                Lorem Ipsum</div>
        </div>
        <!-- /div accordion -->
    </div>
    <!-- /div tabs-1 -->

    <div id="tabs-2">
        <div id="accordion2">
            <h3>Accordion 2-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 2-2</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordoin 2-3</h3>
            <div>
                Lorem Ipsum</div>
        </div>
        <!-- /div accordion2 -->
    </div>
    <!-- /div tabs-2 -->

    <div id="tabs-3">
        <div id="accordion3">
            <h3>Accordion 3-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 3-2</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordoin 3-3</h3>
            <div>
                Lorem Ipsum</div>
        </div>
        <!-- /div accordion3 -->
    </div>
    <!-- /div tabs-3 -->

    <div id="tabs-4">
        <div id="accordion4">
            <h3>Accordion 4-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 4-2</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordoin 4-3</h3>
            <div>
                Lorem Ipsum</div>
        </div>
        <!-- /div accordion4 -->
    </div>
    <!-- /div tabs-4 -->
</div>
<!-- /div Tabs -->

JavaScript

$("#accordion").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#accordion2").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#accordion3").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#accordion4").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#tabs").tabs();
$("#tooltip").tooltip();
$(".selector").tooltip({
    open: function(event, ui) {
        ui.tooltip.css("max-width", "50px");
    }
});

// Hover states on the static widgets
$("#dialog-link, #icons li").hover(
    function() {
        $(this).addClass("ui-state-hover");
    },
    function() {
        $(this).removeClass("ui-state-hover");
    }
);

// Getter for tooltip
var position = $(".selector").tooltip("option", "position");
// Setter for tooltip
$(".selector").tooltip("option", "position", {
    my: "left top+15",
    at: "left top"
});
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
console.log(contentAreas)
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');
    // open or close as necessary
    panel[isOpen ? 'slideUp' : 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen ? 'hide' : 'show');
    // stop the link from causing a pagescroll
    return false;
});
// hook up the expand/collapse all
expandLink.click(function () {
    $("#accordion, #accordion2, #accordion3, #accordion4").accordion( "option", "active", false )
    $(".ui-accordion-header").blur();
});
// when panels open or close, check to see if they're all open
contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open,...