Skip to main content

Toggle Widget Sidebar Dengan Toggle Multi Div

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB