diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


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).

In <head> I have this line:

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


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)

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'); ?>

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

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.

CSS, we need CSS.
Put this into your stylesheet:

#m1, #m2, #m3, #m4 {
display: none;

[Source: tamba2.org.uk]

Share This Story, Choose Your Platform!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...