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 is not my code.
This code is from the utterly indispensable CSS Cookbook by Christopher Schmitt (O'Reilly Publishing).
And the mistakes which sat here unnoticed by all have been corrected by Jennifer - Proof reading rates on enquiry :)

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;
}

 

These pages are independent of http://wordpress.org
All design, content & images © Mark 2004-2008. All rights reserved.