jQuery Accordion Widget in Blogger

I was adding some Erlang and Emacs-related items to the Resources section of the sidebar, and the height finally got annoying enough to do something about.

You'll notice that the it now sits neatly inside a jQueryUI accordion widget. You could easily go inspect that element, but let me save you a right-click and some DOM navigation.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function () { $("#accordion").accordion({autoHeight: false, collapsible : true, active: false}); });</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />

<style type="text/css">
  #sidebar #accordion h3 { padding-left: 25px; font-weight: bold; }
  #sidebar #accordion div ul { list-style: circle; }
  #sidebar #accordion div ul a { text-decoration: underline; color: blue; }
</style>

<span style="color: #d7d7d7; padding-bottom: 15px; font-size: x-small;">(in no particular order)</span>
<div id="accordion">
  <h3>Section Title</h3>
  <div>
    Section Text
    <ul>
      <li><a href="foo">bar</a></li>
    </ul>
  </div>
</div>

As you know unless you've been living under a rock for about five years, Google hosts copies of the jQuery and jQueryUI libraries. As you can see from the style link, they also host the relevant CSS in many themes. I was afraid I'd have to do some JS hacking to get all this working with Blogger, but it's fairly straightforward. Just add an HTML/JavaScript widget to your blog, paste in the above code, and play with the styling a bit if you like.

Thanks to jQuery, the sidebar is now markedly less cluttered than it was twenty minutes ago.