Toggle Widget Sidebar Dengan Toggle Multi Div

Toggle Widget Sidebar Dengan Toggle Multi Div

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×