Blogging Tip : Creating a Vertical Accordion Menu

Accordions are often used as part of Main Navigation or subnavigation. If used for navigation it is conceptually equivalent to Tabs. As we all know, Google Reader has implemented Accordion interface and the usability of the reader has improved tremendously. A common reason for wanting to use a vertical accordion menu rather than a typical "static" navigation system is its ability to compress a large set of navigation menus into a small space on the window, and then display the submenus only when the user is tabbing the navigation itself.

Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Template check box. Click here to copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag



Then, you need to copy the scripts source code below and paste between the closing b:skin tag and the closing head tag.

<script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/ddaccordion.js"></script>
<script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/ddaccordion1.js"></script>

Press CTRL F. You will then be presented with the following picture. Type this code <div id='sidebar-wrapper'> in the search box.



Copy here and paste the following code right after it.

Save the changes.

(Note - This tutorial is meant for minima template users as the sidebar name varies in different template. Also, you need to change the data urls to yours as well to title bars.