Monday, May 28, 2012

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.

3 comments:

  1. Every aspiring Web developer should know about the power of JavaScript and how it can be used to enhance the ways in which people see and interact with Web pages. http://bit.ly/KXrI9u Fortunately, to help us be more productive, we can use the power of JavaScript libraries, and in this article we will take a good look at jQuery in action

    ReplyDelete
  2. When I get really cool! Thanks, keep up the good work with the incredible lessons. :)

    ReplyDelete
  3. can i use it in posts ??? please replyy

    ReplyDelete