JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page" id="home"> 
    <div data-role="content">
        <div data-role="footer">
            <div data-role="navbar">
                <ul>
                    <li>
                        
                   <a id="showHidden" style="float:left; width:100%;">Collapsible Alternative (Click Me)<img src="http://www.uglymongrel.com/jqm/faq/docs/demos/_assets/img/album-bb.jpg" style="float:left;" /></a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
        <div class="hidden" id="showMe">
            <p>I'm the collapsible alternative content.</p>
        </div>
        <div data-role="footer" data-theme="e">
            <div data-role="navbar" data-theme="e">
                <ul data-theme="e">
                    <li data-theme="e"><a data-theme="e" id="showHidden2" style="float:left; width:100%;">Collapsible Alternative (Click Me)<img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/us.png" alt="US Flag" style="float:right;" /></a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
        <div class="hidden" id="showMe2" data-theme="e">
            <p data-theme="e">I'm another collapsible alternative content.</p>
        </div>
    </div>
</div>

CSS

.hidden {
    display: none;   
}

JavaScript

$('#showHidden').click(function() {
    $('#showMe').toggle(); 
});

$('#showHidden2').click(function() {
    $('#showMe2').toggle(); 
});