Blogger: Collapsible Widgets

Recently, I came upon a request for the ability to Show and Hide widgets. This blogger had some long lists in the sidebar he wanted to make easier to skip through and condense. Another blogger found a solution here to alter the widget template with a show/hide anchor in the widget title. It works, but it occurred to me this would be cumbersome to maintain since it requires every widget template be modified.

I've come up with an alternate solution done entirely through javascript. The widget templates are not touched and adding collapse functionality to multiple widgets is much easier. All it takes is adding my script and the ID of the widget you want to make collapsible. Copy and paste the below script into your template just above the </body> tag.

<script type='text/javascript'>
//<![CDATA[
    function addShowHide(strWidget) {
      var objWidget = document.getElementById(strWidget),
          objHeader = objWidget.getElementsByTagName("h2")[0];
         
      if(typeof(objHeader) != 'undefined')
      {
        var strContWidget = "'cont" + strWidget + "'";

        var objCont = objWidget.getElementsByTagName("div")[0];
        if(objCont.id == ""){objCont.id = "cont" + strWidget;}
        else { strContWidget = "'" + objCont.id + "'"; }

        var strASH = '<a title="Show or Hide" href="javascript:doShowHide(' + strContWidget + ')"> +/- </a>';
        objHeader.innerHTML = strASH + objHeader.innerHTML;
      }
    }
    function doShowHide(strCont) {
      var objCont = document.getElementById(strCont);

      if(objCont.style.display == 'none') { objCont.style.display = 'inline';}
      else { objCont.style.display = 'none'; }
    }
//]]>
  </script>

How it Works
There are two functions in the script. The first adds a show/hide link in front of the widget title set to show/hide the first <div> element in the widget. When the link is clicked, the second function toggles the widgets content display style. Adding the functionality is a simple mater of finding the widget ID, then calling the first function.

Setting up your First Widget
Finding a widget ID is easiest done by loading your blog, right clicking the page and viewing source. From there hit Ctrl+F and type in the widget title. For instance to make the Blog Archive collapsible search for Blog Archive and you'll find <div class='widget BlogArchive' id='BlogArchive1'> nearby. Now we need to set the widget with ID BlogArchive1 to show/hide by adding addShowHide("BlogArchive1"); to the script just before the //]]> at the end. Preview the changes and look for a +/- link just in front of the Blog Archive title. If it's there, Save Template and view the blog. Click on the link and the archive should instantly collapse, then expand back out on your next click. Simple!

Conclusion
My script makes adding show/hide functionality to your widgets simple and easily scalable to any number of widgets. Perform the same steps in the Blog Archive example for each widget you'd like to work this way. It's certainly much simpler than the alternative solution. Give it a try for yourself!

P.S.: I have an idea for another function to automatically add show/hide to all sidebar widgets. I may include it in a future posting if I find there's interest.

Support JSBlogStop:

Donate with Dwolla