Toggle Widget Sidebar With Toggle Multi Div

This is a continuation of previous post as variations in the use of multi div jquery toggle to show hide content. So with this it becomes easier to save the place in the sidebar of the blog.
Toggle sidebar widget can be filled with the Facebook Like Box, Google+ Followers, Google+ Badge, and so forth, so that the remaining space in the sidebar more could you optimize for display Adsense ads, PPC, ad self or others.
Author: Adhy Suriady
By simply clicking copypaste gadget script into an HTML / JavaScript, then we can easily create a toggle sidebar for some widgets to save space in the sidebar.

DEMO

For those who want to try it please copy the code below and paste it into the gadget HTML / JavaScript sidebar in Layout.

<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>

You can make more than 3 tabs, and please keep in mind to always use the last tab style="border-bottom:none" as in the code above

And make sure that your own template library jquery any version.