Collapse your categories

Using this code will allow you to have a category title in your sidebar which when clicked, causes the category contents to display. When the title is clicked again, the display collapses back. This code is from the utterly indispensable CSS Cookbook by Christopher Schmitt (O'Reilly Publishing). One: In <head> I have this line: <script […]
Using this code will allow you to have a category title in your sidebar which when clicked, causes the category contents to display. When the title is clicked again, the display collapses back. This code is from the utterly indispensable CSS Cookbook by Christopher Schmitt (O'Reilly Publishing).
One:

In <head> I have this line:

<script type="text/javascript" src="http://www.tamba2.org.uk/T2/hacks/kadabra.js">
</script>

Two:

In the directory T2/hacks, I have the following file. Highlight just this code and save - using Notepad - as "kadabra.js"

function kadabra(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block"
}
return false
} else {
return true
} }
That's the js code sorted.......now to put the function into index.php (or sidebar.php)
Three:
The whole of the bottom of my sidebar code looks like this:

<li id="categories"><a href="#" onclick="return kadabra('m2');"> Categories<a>
<ul id="m2">
<?php wp_list_cats('sort_column=name&optioncount=1'); ?>
</ul>
</li>

<li id="archives"><a href="#" onclick="return kadabra('m3');"> Archives<a>
<ul id="m3">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

Study that to grab just what you need.

You can hide more, just change the ul id for each, and be sure to add the id to the CSS as well.


Four:
CSS, we need CSS.
Put this into your stylesheet:
#m1, #m2, #m3, #m4 {
display: none;
}

[Source: tamba2.org.uk]