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.

Toggle Widget 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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments