JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<div id="hc1" class="haccordion">
    <ul>

    <li>
        <div class="hpanel">
        <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img src="http://www.fourseasons.com/images/generated/property/langkawi/landing_pages/basics_welcome.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
        </div>
    </li>

    </ul>
</div>

CSS

html, body
{
    height:100%;
    width: 100%;
}

*
{
    margin:0px;
    padding:0px
}

#hc1, #hc1 ul, #hc1 li
{
    height: 100%;
}

#hc1, #hc1 ul
{
    width: 100%;
}

li
{
    border: 1px solid black;
    height: 100%;
}

/* -- Start Accordion -- */
.haccordion{
    padding: 0;
}

.haccordion ul{
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden; /*leave as is*/
}

.haccordion li{
    margin: 0;
    padding: 0;
    display: block; /*leave as is*/
    overflow: hidden; /*leave as is*/
    float: left; /*leave as is*/
}
/* -- End Accordion -- */

JavaScript

/* Horizontal Accordion script
* Created: Oct 27th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var haccordion = {
    //customize loading message if accordion markup is fetched via Ajax:
    ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /></div>',

    accordioninfo: {},
    //class that holds config information of each haccordion instance
    expandli: function(accordionid, targetli) {
        var config = haccordion.accordioninfo[accordionid]
        var $targetli = (typeof targetli == "number") ? config.$targetlis.eq(targetli) : (typeof targetli == "string") ? jQuery('#' + targetli) : jQuery(targetli)
        if (typeof config.$lastexpanded != "undefined") //targetli may be an index, ID string, or DOM reference to LI
        config.$lastexpanded.stop().animate({
            width: config.paneldimensions.peekw
        }, config.speed) //contract last opened content
        $targetli.stop().animate({
            width: $targetli.data('hpaneloffsetw')
        }, config.speed) //expand current content
        config.$lastexpanded = $targetli
    },


    urlparamselect: function(accordionid) {
        var result = window.location.search.match(new RegExp(accordionid + "=(\\d+)", "i")) //check for "?accordionid=index" in URL
        if (result != null) result = parseInt(RegExp.$1) + "" //return value as string so 0 doesn't test for false
        return result //returns null or index, where index is the desired selected hcontent index
    },

    getCookie: function(Name) {
        var re = new RegExp(Name + "=[^;]+", "i") //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
        return document.cookie.match(re)[0].split("=")[1] //return its value
        return null
    },

    setCookie: function(name, value) {
       ...