Okay..if the formatting throws this out, I’ll post this as a text file.
1:
In <head> I have this line:
<script type="text/javascript" src="http://www.tamba2.org.uk/T2/hacks/kadabra.js">
</script>
2:
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)
3:
The whole of the bottom of my sidebar code looks like this:
<li id="linkage"><a href="#" onclick="return kadabra('m1');">‡ Site Linkage</a>
<ul id="m1">
<?php wp_get_links(1); ?>
</ul>
</li>
<li id="categories"><a href="#" onclick="return kadabra('m2');">‡ Categories</a>
<ul id="m2">
<?php wp_list_cats(); ?>
</ul>
</li>
<li id="archives"><a href="#" onclick="return kadabra('m3');">‡ Archives</a>
<ul id="m3">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li id="search">
<a href="#" onclick="return kadabra('m4');">‡ Search</a>
<ul id="m4">
<li>
<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<label for="s"></label>
<input type="text" name="s" id="s" size="15" />
<input type="submit" name="submit" value="»" />
</div>
</form>
</li>
</ul>
</li>
If you stare at that a lot, and what you’ve got, it should figure where things go.
4:
CSS, we need CSS.
Put this into your stylesheet:
#m1, #m2, #m3, #m4 {
display: none;
}
Now, when all that is correctly put together, you should get the popup/down effect that I have.
This is NOT my code. This code is from the utterly indispensable CSS Cookbook by Christopher Schmitt (O’Reilly Publishing).
This text is also uploaded to http://www.tamba2.org.uk/wordpress/kadabra.txt
