Toggle Widget Sidebar Dengan Toggle Multi Div

Toggle Widget Sidebar Dengan Toggle Multi Div - Ini ialah lanjutan dari postingan sebelumnya sebagai variasi penggunaan toggle multi div jquery untuk show hide content. Sehingga dengan ini menjadi lebih gampang dalam mengirit daerah di sidebar blog.

Toggle widget sidebar ini sanggup diisi dengan Facebook Like Box, Google+ Followers, Google+ Badge, dan lain sebagainya, sehingga sisa space lainnya di sidebar sanggup Anda optimalkan untuk menampilkan iklan Adsense, PPC, iklan berdikari atau lain sebagainya.

Dengan hanya meng-copypaste scriptnya ke dalam sebuah gadget HTML/JavaScript, maka dengan gampang kita sanggup menciptakan toggle sidebar untuk beberapa widget untuk mengirit daerah di sidebar.

DEMO

Bagi yang ingin mencobanya silahkan copy isyarat 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 sanggup menciptakan lebih dari 3 tab, dan harap diperhatikan untuk tab terakhir selalu memakai style="border-bottom:none" ibarat pada isyarat di atas.

Dan pastikan bahwa template Anda sudah mempunyai jquery library berapa pun versinya.

Sumber https://www.kompiajaib.com/

Share this post