OK, here's a bit more detail on what I was thinking:
1. First of all, Firefox tells me that each sideblock is in fact two elements, one with class "sideblockheading" and one with class "sideblockmain". Now if nothing else, these two should be contained in a div class="sideblock" (the reason will be apparent in a minute).
2. Using the whole header as a clickzone can definitely be done despite the presence of other icons, if the click handling function is implemented correctly. I 'll send you the code I mentioned and discuss this further afterwards.
3. The whole point of what I 'm trying to say is that
IMHO, the best way to hide/show the blocks is to detect a click (either by click handler, or from within the javascript in a href), and then travel upwards the DOM hierarchy until we find the "sideblock" div (that's why it's needed). Then, add or remove from its "class" property the keyword "hidden". The rest is simple
CSS:
.hidden .sideblockheading {
color: #999 !important; /* gray */
}
.hidden .sideblockmain {
display: none !important;
}
Or you can even get a bit fancier than that and instead of putting an small box in class hide-show, do this:
- Put a transparent gif of appropriate size in the img. This will serve to just "take up space" and be a click target. Usability is not compromised for text-based clients, because we can have an alt tag.
- To show a graphic to most web browsers, use a spin-off of the technique you are using for menu icons in the standardorange theme:
.sideblock .hide-show img {
height: 16px;
width: 16px;
background-image: /* a "hide" icon */
}
.hidden .hide-show img {
background-image: /* a "show" icon */ !important;
}
This way the theme designers have full control over the display characteristics of the hide/show function. What do you think?