Cara Gampang Menambahkan Efek Toggle Pada Sidebar

Masih berbicara wacana toggle, kali ini kita akan mencoba mengaplikasikan imbas toggle ini pada widget sidebar. Sehingga dengan ini content sidebarnya disembunyikan dan akan tampil dikala judul widgetnya diklik.

Dengan begitu tempat di sidebar akan hemat tempat dan dengan ini juga kita dapat menentukan isi widget mana yang ingin disembunyikan.

Tertarik untuk mencobanya? Mari kita mulai mencoba cara gampang menambahkan imbas toggle pada sidebar ini.

Pertama kita harus mengetahui dulu ID dari widget sidebar yang isinya ingin kita sembunyikan. Sebagai pola biasanya aba-aba widget sidebar tampak menyerupai di bawah ini.

 <b:widget id='HTML6' locked='false' title='Blog&apos;s Stats' type='HTML'>
       <b:includable id='main'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
     <h2 class='title'><data:title/></h2>
   </b:if>
   <div class='widget-content'>
     <data:content/>
   </div>
 </b:includable>
     </b:widget>

Dari aba-aba widget di atas tersebut kita telah mengetahui bahwa ID widgetnya ialah HTML6 dan isi widgetnya dibungkus dengan class "widget-content". Maka kita menciptakan togglenya menyerupai di bawah ini.

 $(function() { 
     $("#HTML6").click(function () {
     $("#HTML6 .widget-content").toggle("slow")
 });
  });

Seperti biasa silahkan simpan script toggle-nya di atas aba-aba </body>

Agar isi widgetnya tidak muncul dan akan muncul dikala judul widgetnya diklik, silahkan buat aba-aba CSS menyerupai di bawah ini.

 #HTML6 .widget-content {display:none}

Dan rubah bentuk kursor pada judul widgetnya menjadi pointer menyerupai di bawah ini.

 #HTML6 h2{cursor:pointer}

Setelah itu silahkan SAVE perubahan edit HTML blog Anda. Namun perlu diingat, sebab ini memakai toggle jadi pastikan blog Anda telah dipasang jquery library. Dan jikalau ingin mencoba memakai fungsi toggle lainnya menyerupai bounce, clip, blind, dan lain-lain silahkan baca lagi postingannya di link di bawah ini. Jangan lupa untuk menambahkan jquery-ui semoga efeknya dapat berjalan.

• Baca juga: Beberapa Jenis Efek Toggle Dengan Jquery

Untuk demonya silahkan lihat pad link di bawah ini. Silahkan klik pada sidebar "Google+ Followers" nya.

DEMO

Sumber https://www.kompiajaib.com/

Share this post