JSFiddle - React, Tailwind, and code Playground

by dimaslanjaka

HTML

<div id='wrapper'>
<div dir="ltr" style="text-align:left;" trbidi="on">
<div class="bsd-sitemap" id="bsd-sitemap">
<span class="loading">Loading Content..</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:15px;
  background:#ddd;
  padding:0;
  margin:0;
}

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

.bsd-sitemap {
    background-color: #222;
    color: #ddd;
    font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;
    font-size: 14px;
    font-weight: 410;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,.1);
}

.bsd-sitemap .toc-header {
    color: #fff;
    font-family: inherit;
    font-weight: 410;
    font-size: 14px;
    background-color: #333;
    margin: 0;
    padding: 13px;
    overflow: hidden;
    cursor: pointer;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;
    transition: initial;
}

.bsd-sitemap .toc-header:hover {
    background-color: #3a3a3a;
}

.bsd-sitemap .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;
}

.bsd-sitemap .toc-header.active {
    background: #3a3a3a;
    color: #fff;
}

.bsd-sitemap .toc-header.active:before {
    border-color: #fff transparent transparent;
    top: 5px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.bsd-sitemap .loading {
    display: block;
    padding: 14px;
    text-decoration: blink;
}

.bsd-sitemap ol {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: initial;
}

.bsd-sitemap li {
    line-height: normal!important;
    margin: 0!important;
    padding: 7px 7px 7px 16px!important;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    background: #222!important;
    transition: initial;
}

.bsd-sitemap a {
   ...

JavaScript

var toc_config = {
	url:'http://www.web-development.cf',
	containerId: 'bsd-sitemap',
	showNew: 15,
	newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FF0000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:2px;">New!</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+"...