JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<div data-role="page">
    <div data-role="header">
        <h1>Expanding AJAX Content</h1>
    </div>
    <div data-role="content">
        <div data-role="collapsible" data-url="http://www.apexeleven.com/stackoverflow/jsonp.php">
            <h3>Click Me</h3>
            <p></p>
        </div>
        <div data-role="collapsible" data-url="http://www.apexeleven.com/stackoverflow/jsonp.php">
            <h3>Click Me</h3>
            <p></p>
        </div>
        <div data-role="collapsible" data-url="http://www.apexeleven.com/stackoverflow/jsonp.php">
            <h3>Click Me</h3>
            <p></p>
        </div>
        <div data-role="collapsible" data-url="http://www.apexeleven.com/stackoverflow/jsonp.php">
            <h3>Click Me</h3>
            <p></p>
        </div>
    </div>
</div>

CSS

.ui-mobile .ui-page .ui-collapsible .ui-collapsible-content {
    padding-top    : 0;
    padding-bottom : 0;
}

JavaScript

//only run the event handler for collapsible widgets with the "data-url" attribute
$(document).delegate('.ui-collapsible[data-url] > .ui-collapsible-heading', 'click', function () {

    //cache the collapsible content area for later use
    var $this = $(this).siblings('.ui-collapsible-content');
    
    //check if this widget has been initialized yet
    if (typeof $this.data('state') === 'undefined') {
        
        //initialize this widget
        
        //update icon to gear to show loading (best icon in the set...)
        $this.siblings('.ui-collapsible-heading').find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-gear')
        
        //create AJAX request for data, in this case I'm using JSONP for cross-domain abilities
        $.ajax({
            
            //use the URL specified as a data-attribute on the widget
            url           : $this.closest('.ui-collapsible').data('url'),
            type          : 'get',
            dataType      : 'jsonp',
            success       : function (response) {
            
                //get the height of the new content so we can animate it into view later
                var $testEle   = $('<div style="position:absolute;left:-9999px;">' + response.copy + '</div>');
                $('body').append($testEle);
                var calcHeight = $testEle.height();
        
                //remove the test element
                $testEle.remove();
            
                //get data to store for this widget, also set state
                $this.data({
                    state         : 'expanded',
                    height        : calcHeight,
                    paddingTop    : 10,
                    paddingBottom : 10
                    
                //add the new content to the widget and update it's css to get ready for being animated into view
                }).html('<p>' + response.copy + '</p>').css({
                    height        : 0,
                   ...