#html:
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading relative panel-heading2">
<h2 style="text-align: left;">Pemasukan</h2>
<button class="btn btn-xs btn-danger pull-right" title="Informasi" onclick="swap('a1')"><i class="fa fa-exchange fa-fw"></i> </button>
</div>
<div id="chart_a1" class="panel panel-default" style="padding-left: 15px;">
//konten1
</div>
<div id="info_a1" class="panel panel-default hidden">
<blockquote>
<p>Pendapatan</p>
<footer>Merupakan total rencana pendapatan selama setahun</footer><br/>
</blockquote>
</div>
</div>
</div>
</div>
//CSS:
.hidden{display: none;}
//JavaScript:
function swap(name) {
if ($('#info_' + name).hasClass("hidden")) {
$('#info_' + name).removeClass('hidden').addClass('show');
$('#chart_' + name).removeClass('show').addClass('hidden');
}
else if ($('#info_' + name).hasClass("show")) {
$('#info_' + name).removeClass('show').addClass('hidden');
$('#chart_' + name).removeClass('hidden').addClass('show');
}
}
Atau dapat juga menggunakan cara ini:
element.css('display', 'block'); //untuk menampilkan
element.css('display', 'none'); //untuk menyembunyikan
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon