Gudang Tutorial Blog

#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}

#slick_area a{color:#000;text-decoration:none}

.slick_area a:hover{color:#fff}

ul.slick{margin:2px 5px 5px 5px;padding:0px}

ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}

ul.slick li:hover{border:1px dotted #f00}

ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}

.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}

.content-slick ul{margin:10px;padding:0}

.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}

.content-slick ul li:last-child{border-bottom:none}

.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}

.content-slick ul li a{text-decoration:none;color:black;display:block}

<script type='text/javascript'>

$(document).ready(function(){

$(&#39;#tabdua, #tabtiga&#39;).hide();

$(&quot;ul.slick li&quot;).click(function () {

$(&quot;.active&quot;).removeClass(&quot;active&quot;);

$(this).addClass(&quot;active&quot;);

$(&quot;.content-slick&quot;).slideUp();

var content_show = $(this).attr(&quot;title&quot;);

$(&quot;#&quot;+content_show).slideDown();

});

});

</script>

<ul class="slick">

<li title="tabsatu" class="slick active">Tab Satu </li>

<li title="tabdua" class="slick active">Tab Dua </li>

<li title="tabtiga" class="slick">Tab Tiga </li>

</ul>

<div id="tabsatu" class="content-slick">

Letakkan kode HTML/Javascript di Tab Satu

</div>

<div id="tabdua" class="content-slick">

 kode HTML/Javascript di Tab Dua

</div>

<div id="tabtiga" class="content-slick">

 kode HTML/Javascript  di Tab Tiga

</div>