JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div id='db-tab-acor'>
    <h2>Panel 1</h2>
    <div class='tab-view'>
        ... tempat widget ...
    </div>
    <h2>Panel 2</h2>
    <div class='tab-view'>
        ... tempat widget ...
    </div>
    <h2>Panel 3</h2>
    <div class='tab-view'>
        ... tempat widget ...
    </div>
    <h2>Panel 4</h2>
    <div class='tab-view'>
       ... tempat widget ...
    </div>
</div>

CSS

#db-tab-acor {
 width:50%; /* sesuaikan dengan lebar sidebar blog */
 margin:10px auto;
 border:2px solid #ccc;
 -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#db-tab-acor h2 {
 cursor:pointer;
 margin:0px 0px;
 padding:8px 10px;
 background-color:#333;
 font:bold 14px coda;
 color:#e6e6e6;
 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 border-top:2px solid #bbb;
 background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;
}

#db-tab-acor .tab-view {
 background-color:#f1f1f1;
 padding:10px;
 color:black;
 height:120px;/* sesuaikan atau bisa di ubah menjadi auto */    
}

#db-tab-acor h2.show {
 background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;
 background-color:#369;
 color:#ccc;
}

JavaScript

$(function() {
    $('#db-tab-acor .tab-view').hide();
    $('#db-tab-acor h2:first').addClass('show').next().slideDown('slow');
    $('#db-tab-acor h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#db-tab-acor h2').removeClass('show').next().slideUp('slow');
            $(this).toggleClass('show').next().slideDown('slow');
        }
    });
});