JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="accordion">



<div class="panel_container" id="panel1">
    <h3>Panel 1</h3>
    <div id="panel1-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

<div class="panel_container" id="panel2">

    <h3>Panel 2</h3>
    <div id="panel2-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
        
</div>

<div class="panel_container" id="panel3">
    <h3>Panel 3</h3>
    <div id="panel3-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

<div class="panel_container" id="panel4">
    <h3>Panel 4</h3>
    <div id="panel4-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

<div class="panel_container" id="panel5">
    <h3>Panel 5</h3>
    <div id="panel5-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

</div>

CSS

#accordion {
            border: 1px solid #1F669B;
            width: 600px;
            height: 310px;
            font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
            font-size: 11px;
            position:relative !important;
            display:block;
            overflow:hidden;
background-image:url("http://www.andrewsellick.com/examples/tabslideV2-mootools/images/aston.jpg");
            background-repeat:no-repeat;
            background-position:top left;
    }
    
    h3 {
            font-size: 12px;
            padding: 6px 6px 4px 35px;
            margin: 0;
            color:#fff;
            border-bottom:1px solid #333333;
            cursor:pointer;
            display:block;
background-image:url("http://www.andrewsellick.com/examples/tabslideV2-mootools/images/tab-left.gif");
            background-position:top left;
            background-repeat:no-repeat;
    }
#visible {
background-image:url("http://www.andrewsellick.com/examples/tabslideV2-mootools/images/tab-left-active.gif");
            border-bottom:1px solid #DA1074;
    }
    
    .panel_body {
            height:150px;
            background-color:#333333;
            display:block;
            position:relative;
            color:#FFFFFF;
    }
    
    .panel_body div {
            padding:3px 5px;
    }
    
    .panel_container{
        bottom:0px;
        margin:0px;
        padding:0px;
        background-image:url("http://www.andrewsellick.com/examples/tabslideV2-mootools/images/tab-right.gif");
        background-position:top right;
        background-repeat:repeat-x;
        background-color:#333333;
    }
    .wrapper{
        bottom:0px;
        position:absolute;
    }

JavaScript

var sliding             = 0;
var slideTime             = '';
var panelHeight         = 150;
var effectDuration         = 300;
var idleTime             = 10000;

// Set is sliding value
function setSliding(a_ISliding){
    sliding = a_ISliding;
}

// Get is sliding value
function getSliding(){
    return sliding;
}

// Carry out accordian styled effect
function accordion() {
        
    var eldown = this.getNext();
    
    //  If element is visible do nothing
    if ($('visible') == this) {
            return false;
    }
    if ($('visible')) {
    
            if( getSliding() == 1 ){
                    return false;
            }
        
            var elup = $('visible').getNext();

            setSliding( 1 );
            
            parellelSlide( elup, eldown );
            $('visible').id = '';
            
    }
    else{
            setSliding( 1 );
            singleSlide( eldown );
    }
    
    this.id = 'visible';
}

function getElementsByClassNameFix(tag, className) {
        // This method of populating is used as Safari does use getElementsByClassName()
        var elements = [];
        var safariElements = $A(document.getElementsByTagName(tag));
        safariElements.each(function(safariElements){
            if(!safariElements.className.match(className)) return;
            elements.push(safariElements);
        });
        return elements;
}

// Setup accordian initial state
function init() {
        
        var bodyPanels             = getElementsByClassNameFix('div', 'panel_body');
        var panels                     = getElementsByClassNameFix('div', 'panel_container');
        var noPanels                 = panels.length;
        var percentageWidth = 100 / noPanels;
        var position                 = 0;
        
        //  Loop through body panels and panels applying required styles and adding event listeners
    for (i = 0; i < bodyPanels.length; i++) {
            bodyPanels[i].style.height = '0px';
           ...