JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<input type="button" id="but" value="Add Content" /><br /><br />

<div id="accordion">

    <!-- 1st header and pane -->
    <img src="http://static.flowplayer.org/img/title/streaminge.png" />
    <div style="width:200px; display:block"> .. pane content .. </div>

    <!-- 2nd header and pane -->
    <img src="http://static.flowplayer.org/img/title/streaminge.png" />
    <div> .. pane content ..</div>

</div>

CSS

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
    background:#FFFFFF;
    height:80px;
    padding:10px 0 10px 20px;
    width:100%;
    border:1px solid #ddd;
}

/* accordion header */
#accordion img {
    float:left;
    margin-right:10px;
    cursor:pointer;
    opacity:0.5;
    filter: alpha(opacity=50);
}

/* currently active header */
#accordion img.current {
    cursor:default;
    opacity:1;
    filter: alpha(opacity=100);
}

/* 
    accordion pane. should initially have zero width and display:none.
    the first pane should override these with inline style
*/
#accordion div {
    width:0px;
    float:left;    
    display:none;        
    margin-right:10px;
}

/* content inside a pane should have fixed width */
#accordion div h3 {
    color:#444;
    margin:0 0 -10px 0;
    width:50px;
    font-size:15px;    
}
    
#accordion div p {    
    font-size:11px;
    width:50px;
}

JavaScript

$("#accordion").tabs("#accordion div", {
    tabs: 'img', 
    effect: 'horizontal'
});



$('#but').click(function() {
    $('.accordion_element').tabs('destroy');

    $("#accordion").append('<img src="http://static.flowplayer.org/img/title/streaminge.png" />')
    $("#accordion").append('<div> .. pane content .. </div>');    
    
    $("#accordion").tabs("#accordion div", {
        tabs: 'img', 
        effect: 'horizontal'
    });
});