Gustible - under the rubric of [$_SELF]

This is a quick guide to implementing folding menu items in the sidebars of a Cutline theme. If you look to the sidebars at the right hand side of this page, you will note that the items “Categories”, “Archives” and “Admin” have “+” signs next to them. If you click on either the title or the “+”, the menu item expands to show you the contents.
I did this by making a very small modification to the Cutline theme. The change requires that you modify your wordpress theme, and upload a new file to your wordpress installation – but this is really easy to do. So here we go.
I am using the version of Cutline called “Cutline 3-Column Right”. This gives me the main content section, and two columns to the right of the page. I wanted to make optimal use of the available page, and therefore wanted to make the less frequently accessed menu items collapsible.
To do this, I had to modify the following:
1) The sidebar.php file.
2) Create a javascript file called extended.js
Before you start – you MUST backup any files you edit…you really should.
To modify the sidebar.php file, log in to your WordPress account, and go to the “Design” tab. Then choose “Theme Editor”. The file you should edit is called “sidebar.php”. (Or r_sidebar.php if you are using 3 column Cutline).
In this file, find the menu item you want to make foldable. For example:

<h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>

The code above is the HTML markup for the categories item, with no folding.
To make the menu item foldable, change the code above to the following:

<h2>
<a id="categoryH" href="#" onclick="return collapseUL('categoryUL','categoryH', 'Categories');">+ Categories</a>
</h2>
<ul id="categoryUL" style="display:none">
<?php wp_list_cats('sort_column=name'); ?>
</ul>

We have changed the H2 header by giving it an ID and adding some javascript, and gave an ID to the UL element. What happens here is that when the H2 element is clicked, the javascript function “collapseUL” will be called with three parameters. These parameters are the id of the UL element you want to collapse, the id of the header you just clicked on, and the display name of the menu item.
Once you have made the changes, save the file.
You will not yet be able to test the page – we must first create the javascript function “collapseUL”. You can download the code for the “collapseUL” function here .
The code simply determines whether the list element (UL) is visible or not, and changes the visibility to the opposite of what it is. It also adds a “+” or “-” to the front of the heading depending on the visibility of the element.
To use this code you must do the following:

• Add a line to the top of sidebar.php, that reads as follows:
  <script type="text/javascript" src="/wordpress/wp-content/scripts/extended.js"></script>

• Save the javascript in a file called “extended.js”, and upload it to the folder “/wp-content/scripts” in your wordpress installation. (I use fireftp for uploading – it works great with FireFox)

That is it – you are done. You can now test folding menus by clicking on the menu item in your sidebar, and watch it all unfold.
This simple technique will probably work for most WordPress themes, and will certainly work for most HTML pages as well.