JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<aside id='db-sidebar-menu'>
<div class='sidebar section' id='sidebar'>
<h2>Kategori</h2>
<div class='widget-content'>
    <ul>
    <li>tes</li>
    <li>tes</li>
    <li>tes</li>
    <li>tes</li>
    <li>tes</li>
    </ul>
</div>
<h2>Entri Populer</h2>
<div class='widget-content'>
    tes
</div>
<h2>Statistik</h2>
<div class='widget-content'>
tes
</div>
<h2 class='title'>Komunitas</h2>
<div class='widget-content'>
    tes
</div>
<h2 class='title'>Komentar Terbaru</h2>
<div class='widget-content'>
    tes
</div>
<h2 class='title'>Facebook Suka</h2>
<div class='widget-content'>
    test
</div>
</div>
</aside>

CSS

#db-sidebar-menu {
width:50%;
float:left;
text-align:left;
background:#333;
font-size:99%;
border:4px solid #ddd;
color:#666666;
box-shadow:inset 0 0 5px #000;
display:inline;
word-wrap:break-word;
overflow:hidden;
position:relative;
right:-2px;
padding:0;
}
#db-sidebar-menu .widget {
font-size:97%;
line-height:1.5em;
margin:0;
}
#db-sidebar-menu .widget-content {
margin:0;
padding:10px;
}
#db-sidebar-menu h2 {
cursor:pointer;
line-height:1.5em;
color:#bbbbbb;
text-shadow:0 1px 0 #000;
background:linear-gradient(top,#333333,#3c3c3c);
font-weight:700;
border-color:#444 transparent #222;
border-style:solid;
border-width:1px 0;
margin:0;
padding:5px 10px 4px;
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-sidebar-menu h2.headactive {
background:linear-gradient(top,#3c3c3c,#333333);
box-shadow:0 1px 3px #000;
border-color:#555 transparent #222;
border-style:solid;
border-width:1px 0;
background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;
}
#db-sidebar-menu a {
color:#999999;
text-decoration:none;
text-shadow:0 1px 0 #000;
transition:all .26s ease-out;
}
#db-sidebar-menu a:hover,#db-sidebar-menu a:visited:hover {
color:#FFF;
text-decoration:none;
}
#db-sidebar-menu a:visited {
color:#666666;
}
.sidebar h2 {
text-transform:uppercase;
line-height:1.5em;
font:normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin:0;
padding:0 0 .2em;
}
.sidebar ul {
list-style:none;
border-top:1px solid #222;
border-bottom:1px solid #444;
margin:0 0 1.25em;
padding:0;
}
.sidebar ul li {
border-top:1px solid #444;
border-bottom:1px solid #222;
line-height:1.4em;
margin:0;
padding:3px 0px;
}
.sidebar p {
margin:0 0 .6em;
}

JavaScript

$(function() {
    $('#db-sidebar-menu .widget-content').hide();
    $('#db-sidebar-menu h2:first').addClass('headactive').next().slideDown('slow');
    $('#db-sidebar-menu h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#db-sidebar-menu h2').removeClass('headactive').next().slideUp('slow');
            $(this).toggleClass('headactive').next().slideDown('slow');
        }
    });
});