JSFiddle - React, Tailwind, and code Playground

by mddc

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
    <div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#section1">How can I become a Member</a></h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">
            <p>blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, .</p>
        </div>
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#section2">I want to join. What do I do?</a></h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">
            <p>blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, </p>
        </div>
</div>

JavaScript

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