JSFiddle - React, Tailwind, and code Playground

by dhoerster

HTML

<button id='active'>What's active</button>
<div id="accordion">
    <div>
        <h3><a href="#">Infrastructure</a></h3>
        <div>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/green_valley_ranch">Green Valley Ranch</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/irvine_spectrum">Irvine Spectrum</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/lynwood">Lynwood</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency">Inland Empire Utilities Agency</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/center_for_regenerative_studies">Center for Regenerative Studies</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/agriscapes">Agriscapes</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/sepulveda_basin_wildlife_area">Sepulveda Basin Wildlife Area</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/upper_newport_bay_regional_park">Upper Newport Bay Regional Park</a></p>
            <p><a href="http://www.imadesign.com/dev/work/infrastructure/los_angeles_world_airports">Los Angeles World Airports</a></p>
        </div>  
    </div>
</div>

JavaScript

$(function(){

    // Accordion
    $("#accordion").accordion({ header: "h3", autoHeight: false, collapsible: true, active:false });

    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); 
        });
    
    $('#active').click(function(e){
        e.preventDefault();
        alert('active tab is ' + $('#accordion').accordion('option','active'));
    });
    
    $("#accordion").accordion('activate', 0);
});