No Mod Required

There’s absolutely nothing groundbreaking about the following code sample. People (who are lucky enough to have more time to mess around) have been doing this sort of experimentation for a while now. Thing is, this one is so simple and so plainly useful I just have to toss it out there for your (my?) enjoyment.

Check out the following sample. It’s just a simple show/hide, but I just love the simplicity of the code that runs it.

With a class="more" attached the DL, all we need to run the above is this


dl.more dd{
display:none;
}
dl.more:hover dd{
display:block;
}


There are two things I like about that:

1. It’s as simple as it gets. The only thing simpler than coding that would be not coding anything.
2. It makes sense. A lot of times those “more” links are the spitting image of a dt dd pair, except it’s unrelated tags in an arbitrary structure (something like DIV > P + DIV) so using ready-made structure just feels right.

Yeah, there are potential issues. The one that sticks out to me is it’s not accessible, since with no mouse there’s no :hover. That said, with any solution involving a mouse, accessibility becomes an issue, so it’s not better or worse than any other solution that doesn’t address the mouse-less users.

The other obvious issue is that IE6 doesn’t support :hover on anything but links, so there would need to be a script based solution to get this to work in what is still one of the biggest browsers out there.* But I can dream, can’t I?

*For this site, Firefox is actually the number one browser, followed by IE6 and then IE7. The combination of IE versions are still the dominant browser platform.