How I made the expandable/collapsible side column widgets

At the time I was making a new template called "Aliens, UFOs and Videos". I was trying to make a template design that had a collapsible and expandable sidebar widget header3 that would hide the widget content or display it when clicked on the header3 title, just like the website I was trying to reproduce as a blogger template design. In order to solve certain problems, that problem being how to collapse and expand widgets by clicking on the header3 title, I doubted my own ability. I searched the internet to find a clue on how to achieve this. I looked and looked. I found a few tutorials but none of them worked for me. Eventually I came across a tutorial that was for a simple widget toggle with css and jQuery. The original code can be found here : http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

The original codes that I worked from are:


The css code:
h2.trigger { padding: 0 0 0 50px; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 450px; font-size: 2em; font-weight: normal; float: left; } h2.trigger a { color: #fff; text-decoration: none; display: block; } h2.trigger a:hover { color: #ccc; } h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/ .toggle_container { margin: 0 0 5px; padding: 0; border-top: 1px solid #d6d6d6; background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top; overflow: hidden; font-size: 1.2em; width: 500px; clear: both; } .toggle_container .block { padding: 20px; /*--Padding of Container--*/ background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/ }

The html code:<h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div>

and The jQuery code:
$(document).ready(function(){ //Hide (Collapse) the toggle containers on load $(".toggle_container").hide(); //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) $("h2.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; //Prevent the browser jump to the link anchor }); });

As displayed on that website tutorial .... The code above consists of html, css, and jQuery codes to make it all work. However,there was no instructions on where to place the code in the .xml template file. In as little as 4 hours I figured out where to place all the code and got it all to work. At first the whole thing would not display properly, so I had to cheat a bit. I visited the live demo here (http://www.sohtanaka.com/web-design/examples/toggle/), right clicked on the page and selected "View source". Sure enough, the live demo had all the missing code so I copied and pasted it all over again into my template. I deleted the <h1></h1> code as I didn't need that. Once I saved the template, I found it worked as it was supposed to work. However, when I viewed my blog I clicked on the header title, to make the widget expand and collapse but the entire page jumped to the top of the page. I needed the toggle function to stop jumping. After another search on the Internet I found a line of code that fixed the problem.

Now, to achieve the impossible. With the basic function of three collapsible and expandable widgets on the blog, I now needed to create a way to add widgets to it. I wanted to add the "Add a gadet" function to the original code. After many practise attempts at trying to alter the code, and failing, an idea hit me. What if I add an entire div section between the codes?
　
<div class="container">
<h2 class="trigger"><a href="#">Web Design &amp; Development</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Need a Website?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="trigger"><a href="#">Logo / Corporate Identity</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Need a Logo?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="trigger"><a href="#">Seach Engine Optimization</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Need to be Heard?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="trigger"><a href="#">eCommerce</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Have Product to Sell?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<p style="text-align: center; font-size: 1.1em;"><a href="http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/">Tutorial</a> by <strong>Soh Tanaka</strong>. Check out his <a href="http://www.sohtanaka.com/web-design-blog/">Web Design Blog</a> for more tutorials!</p>
</div>


Above is the code which I copied and pasted from the live demo page (in the View source section). I stripped the code down to it's basic code thus removing the actual contents of the widgets. Below is what I ended up with:


　<div class='container'>
<h2 class='trigger'><a href='#'>Web Design &amp; Development</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Need a Website?</h3>
Add content here.
</div></div>
<h2 class='trigger'><a href='#'>Logo / Corporate Identity</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Need a Logo?</h3>
Add content here.
</div></div>
<h2 class='trigger'><a href='#'>Seach Engine Optimization</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Need to be Heard?</h3>
Add content here.
</div></div>
<h2 class='trigger'><a href='#'>eCommerce</a></h2>
<div class='toggle_container'>
<div class='block'>
<h3>Have Product to Sell?</h3>
Add content here.
</div> </div>
<p style='text-align: center; font-size: 1.1em;'><a href='http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/'>Tutorial</a> by <strong>Soh Tanaka</strong>. Check out his <a href='http://www.sohtanaka.com/web-design-blog/'>Web Design Blog</a> for more tutorials!</p>
</div>

　
I then proceeded to add the same lot of code into the left column sidebar. A few other problems arose after adding this code to the template. I noticed that when I viewed the "Design" page these expandable/collapsible widgets were in the fully expanded mode. They could not be collapsed at all. This made it impossible to move existing widgets in the footer up into the sidebar, or moving widgets from the sidebar down into the footer area. After much thought I came up with an idea. That idea was to strip the code down to remove all the contents and then somehow add an existing widget to it. Eventually I ended up with the code below (This is just for one of the widgets in the entire container).
　
　
<div class='container'>
<h2 class='trigger'><a href='#'>+ / -&#160;&#160;&#160;Seach Engine Optimization</a></h2>
<div class='toggle_container'>
<div class='block'><b:section class='sidebar' id='sidebartab01' preferred='yes' showaddelement='yes'>
<b:widget id='HTML24' locked='false' title='Get Bookmarklet' type='HTML'/>
</b:section></div></div>

</div>
　
The code in blue bold is what I added to the code that created not only the "Add a gadget" feature but it shrunk the entire container down so it was in a collapsed mode. I saved the template, and viewed my blog, and I suddenly became excited. This feature has so much potential. I found I could now add widgets to the "Add a gadget" section in the design page. I could also move widgets about and everything worked fine.

It works in Internet Explorer, Google Chrome and Firefox web browsers.

A tutorial will be written up on how to add this feature to your blog. There are 6 of these widgets on this "Blogger Tutorials for everyone" blog, in the right hand column - at the top.