JSFiddle - React, Tailwind, and code Playground

by Opick Kusanagi

HTML

<div id='wrapper'>
<div dir="ltr" style="text-align:left;" trbidi="on">
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
</div>
<div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family:'Open Sans',sans-serif;
  line-height:normal;
  font-size:14px;
  background:#fdfdfd;
  padding:0;
  margin:0;
}

#wrapper {
  padding:5%;
  margin:0 auto;
  max-width:600px;
}

.table-of-content {
  background-color:#fff;
  color:#444;
  font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;
  font-size:13px;
  font-weight:400;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 0 0 1px #eee;
}

.table-of-content .toc-header {
  color:#444;
  font-family:inherit;
  font-weight:400;
  font-size:14px;
  background-color:#fff;
  margin:0;
  padding:15px;
  overflow:hidden;
  cursor:pointer;
  border-bottom:1px solid #eee;
  transition:initial;
}

.table-of-content .toc-header:hover {
    background-color: #fdfdfd;
}

.table-of-content .toc-header:before {
    content: '';
    width: 0;
    height: 0;
    position: relative;
    float:right;
    top: 10px;
    right: 10px;
    border: 5px solid transparent;
    border-color: #aaa transparent transparent;
    transition: all .3s ease;
}

.table-of-content .toc-header.active {
    background: #fff;
    color: #009fef;
}

.table-of-content .toc-header.active:before {
    border-color: #009fef transparent transparent;
    top: 5px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.table-of-content .loading {
    display: block;
    padding: 15px;
    text-decoration: blink;
}

.table-of-content ol {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: initial;
}

.table-of-content li {
    line-height: normal!important;
    margin: 0!important;
    padding: 8px 8px 8px 15px!important;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    background: #fff!important;
    transition: initial;
}

.table-of-content a {
    color: #444;
    text-decoration: none;
   ...

JavaScript

var toc_config = {
    url: 'http://wajahilmu.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};

!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+"...