Ditulis oleh: Ditulis pada: 10/14/2014
Toggle Widget Sidebar Dengan Toggle Multi Div - Ini adalah lanjutan dari postingan sebelumnya sebagai variasi penggunaan toggle multi div jquery untuk show hide content. Sehingga dengan ini menjadi lebih mudah dalam mengirit tempat di sidebar blog.
Toggle widget sidebar ini dapat diisi dengan Facebook Like Box, Google+ Followers, Google+ Badge, dan lain sebagainya, sehingga sisa space lainnya di sidebar bisa Anda optimalkan untuk menampilkan iklan Adsense, PPC, iklan mandiri atau lain sebagainya.
Dengan hanya meng-copypaste scriptnya ke dalam sebuah gadget HTML/JavaScript, maka dengan mudah kita bisa membuat toggle sidebar untuk beberapa widget untuk mengirit tempat di sidebar.
Bagi yang ingin mencobanya silahkan copy kode di bawah ini dan paste ke dalam gadget HTML/JavaScript sidebar di Tata Letak.
<style type="text/css" scoped="scoped">
.dropdown-container{display:none; width:100%;padding:0;margin:0 auto;}
.dropdown-content{padding:10px;margin:0 auto;background-color:#ccc;}
.dropdown-button{background-color:#ddd; width:100%;cursor:pointer;margin:0 auto;padding:5px 0;border-bottom:1px solid #ccc}
.dropdown-button span{padding:10px}
</style>
<div class="dropdown">
<div class="dropdown-button"><span>Toggle Content 1</span></div>
<div class="dropdown-container">
<div class="dropdown-content">
WIDGET DI SINI
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-button"><span>Toggle Content 2</span></div>
<div class="dropdown-container">
<div class="dropdown-content">
WIDGET DI SINI
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-button" style="border-bottom:none"><span>Toggle Content 3</span></div>
<div class="dropdown-container">
<div class="dropdown-content">
WIDGET DI SINI
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$(".dropdown-button").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).slideUp();
if ($div.is(":visible")) {
$div.slideUp();
} else {
$div.slideDown();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").slideUp();
}
});
});
//]]>
</script>
Anda bisa membuat lebih dari 3 tab, dan harap diperhatikan untuk tab terakhir selalu menggunakan
style="border-bottom:none" seperti pada kode di atas.
Dan pastikan bahwa template Anda sudah memiliki jquery library berapa pun versinya.