JSFiddle - React, Tailwind, and code Playground
HTML
<div class='sc-btn'>
<a href='javascript:void(0)' name='fb' class='aktif'>fb</a>
<a href='javascript:void(0)' name='tw' class='non-aktif'>tw</a>
<a href='javascript:void(0)' name='gp' class='non-aktif'>g+</a>
<a href='javascript:void(0)' name='rss' class='non-aktif'>rss</a>
</div>
<div class='isi'>
<div name='fb'>
<form action="init.php" method="POST">
<table>
<tr>
<td>
<input type="text" id="none" placeholder="nano">
</td>
</tr>
</table>
</form>
</div>
<div name='tw'>twitter</div>
<div name='gp'>google+</div>
<div name='rss'>rss feed</div>
</div>
CSS
.sc-btn a{
background: silver;
padding: 5px;
margin-right:5px;
}
.non-aktif{
opacity: 0.5;
}
.aktif{
opacity: 1.0;
}
.aktif:before{
content: "";
position:absolute;
width:0;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: #bbb transparent;
margin-top: 26px;
margin-left: 0px;}
.isi {
margin-top: 13px;
border-top: 1px solid #bbb;
}
JavaScript
$(document).ready(function(){
// sembunyikan semua div isi
$('.isi div').hide();
// tampilkan hanya div isi pada anak pertama
$('.isi div:first').show();
// saat tombol diklik
$('.sc-btn a').click(function(){
// isi attribut class sema tombol dengan nilai 'non-aktif'
$('.sc-btn a').attr('class','non-aktif');
// isi attribut class tombol yang sedang aktif dengan nilai 'aktif'
$(this).attr('class','aktif');
// buat variabel isi, untuk menampung identitas div isi
var isi = '\'.isi div[name="' + this.name + '"]\'';
// sembunyikan semua div isi
$('.isi div').hide();
// tampilkan div isi dengan identitas yang telah didapatkan
$(isi).slideDown('fast');
});
});