Add a Expand-Collapse Sidebar Widget

Expand Collapse System is very awesome be'coz it give a very Professional feel to blog and as MBT first launched their expand collapse widget in the comment bar, so many blog owners use that system in their blog but as using the jQuery and other languages so that doesn't work work in many blogs but this widget will work in all kind of blog be'coz this you have to add this widget  in the HTML/JavaScript Widget so you don't need to make changes in your template editor. This Widget is simply a made by the CSS for designing and using the JavaScript and some other elements to perform this particular task in this widget.

This idea came in my mind by watching the comment box of blogger which perform same task. 

Add Expand-Collapse Widget

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

 <style>
#sidebar ul {margin-top: -5px;}
#sidebar ul.children {margin: 6px 0 -6px 0;}
#sidebar ul li {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjdeiU6SWJosG7QzVtCbyoRr3zLbzkv7DHstsc4RJsu-QTZGEfvxVRgz-ZrV2Bv38av0E8xJIOhBbeUwFkKfOLJvaMgtV_iJNB5NmhLk8JJmdI24F-H-ZFWS6Hd2Qlp0T6NWtWpgmq60/s1600/ORANGE.GIF") no-repeat scroll 0 5px #FFFFFF;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;}
#sidebar a, #sidebar a:visited {color: #575251;}
#sidebar a:hover {color: #cf4125;text-decoration:bold;}
h2.post-title {margin-bottom: 15px;line-height: 32px;font-size: 28px;font-weight: bold;color: #000000; font-family: Arial; padding-left: 5px;
}
}
</style>

<style>
.post {
    clear: none;
    display: inline;
    float: left;
    height: 550px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    padding: 8px;
    width: 338px;
 border: 1px solid #DCE5EE;
  }
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b-bloggerpagenavi.js' type='text/javascript'></script>

<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'>
<div class='widget-content'>
<div class="msg_list">
<p class="msg_head">Widget 1</p>
<div class="msg_body">
<ul>


<li>
<a href="#">Widget 1.1</a>
</li>


<li>
<a href="#">Widget 1.2</a>
</li>

  </ul>

 
  </div>

<p class="msg_head">Widget 2</p>
<div class="msg_body">
 <ul>

 <li>
<a href="#">Widget 2.1</a>
   </li>


 <li>
<a href="#">Widget 2.2</a>
   </li>




</ul>
</div>


 
<p class="msg_head">Widget 3</p>
<div class="msg_body">
 <ul> <li>
<a href="#">Widget 3.1</a>
   </li>
  
   <li>
<a href="#">Widget 3.2</a>
   </li>
   
  
  
   </ul>
 
</div>
  
<p class="msg_head">Widget 4</p>
<div class="msg_body">
 
  <ul>

 
   
  

   <li>
<a href="#">Widget 4.1</a>
    </li>
 
 

 
   <li>
<a href="#">Widget 4.2</a>
    </li>

 
   </ul>
</div>

<p class="msg_head">Widget 5</p>
<div class="msg_body">

<ul>


<li>
<a href="#">Widget 5.1

</a></li>


</ul></div>

<p class="msg_head">Widget 6</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 6.1</a>
</li>




<li>
<a href="#">Widget 6.2</a>
</li>

</ul>

</div>


<p class="msg_head">Widget 7</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 7.1 </a>
</li>
<ul>

</ul></ul></div>


<p class="msg_head">Widget 8</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 8.1</a>
</li>


<ul>

</ul></ul></div>
<style>
p{
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 320px;
display: block;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#C3A17E;
margin:1px;
color:#FFFFFF;
font-family: Sans-serif,Arial,Helvetica;
font-size: 12px;
font-weight: bold;
}
.msg_body {
padding: 15px 10px 15px;
background-color:#F4F4F8;
}
</style>


<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script></div>
</div></div></div>

• Save Your Widget.

Note:Don't Try to Change any Other Code. All Codes are highly Sensitive

Make Changes....!

• Replace Red colored area with widget heading (as you can see in gif image)
• Replace Orange colored area and made their links
• Replace Blue colored area with links

If Any Problem Comes, Ask in Comments