JSFiddle - React, Tailwind, and code Playground

by denzdii

HTML

</style><script src="https://sites.google.com/site/denzdii01/accdenzdii01.js" type="text/javascript"></script><script src="http://denzdii01.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><script src="https://sites.google.com/site/denzdii01/denzdiiaktif.js" type="text/javascript"></script>

CSS

/* daftar isi
----------------------------------------------- */
#daftar-isi {
    background-color: #333333;
    border: 2px solid #FAFAFA;
    border-width: 2px;
    box-shadow: 0 0 10px #000000;
    color: #FFFFFF;
    margin-bottom: 10px;
}
#daftar-isi .judul-label {
    background-image: -moz-linear-gradient(center top , #3C3C3C, #333333);
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    color: #BBB;
    cursor: pointer;
    font-family: 'Verdana',Arial,Sans-serif;
    font-size: 13px;
    line-height: 100%;
    padding-bottom: 11px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#daftar-isi .headactive {
    background-image: -moz-linear-gradient(center top , #248AB0, #21739B);
    border-bottom: 1px solid #104968;
    border-top-color: 1px solid #24B6E3;
    color: #EFEFEF;
}
#daftar-isi ol {
    background-color: #333;
    color: #999;
    list-style-position: outside;
    margin: 0;
    padding: 0;
}
#daftar-isi li {
    border-bottom: 1px solid #222;
    border-top-color: 1px solid #444444;
    font-family: 'Verdana',Arial,Sans-serif;
    font-size: 11px;
    margin: 0;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 5px;
    padding-top: 5px;
    text-align: left;
    white-space: nowrap;
}
#daftar-isi li:first-child {
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: medium;
}
#daftar-isi a {
    color: #5687F8;
}
#daftar-isi a:hover {
    color: #FF0000;
}
#daftar-isi a:visited {
    color: #5687B8;
}

JavaScript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
$("#daftar-isi .judul-list").hide();
$("#daftar-isi .judul-label:first").addClass('headactive').next().slideDown('slow');
$("#daftar-isi .judul-label").css("cursor", "pointer");
$("#daftar-isi .judul-label").click(function(){
if($(this).next().is(':hidden') ) {
$("#daftar-isi .judul-label").removeClass('headactive').next().slideUp('slow');
$(this).toggleClass('headactive').next().slideDown('slow');
}
return false;
});