Using display: block is a perfectly legitimate method...
This is correct, and it's the method that Booker and I both used in the solutions we posted above.
I think Booker's way is best for anyone who isn't already including the jQuery library in their pages. I would probably use a <span> instead of a button, but that's more a matter of preference than functionality.
I'm not at all familiar with jQuery. Is there any reason not to use plain old JavaScript?
When you say, "plain old JavaScript," do you mean without CSS? Or do you only mean without jQuery?
jQuery
is javascript. It's a javascript file with a lot of pre-written functions in it, which a lot of web developers use so we don't need to reinvent the wheel every time we want to do something that's already defined in that file. The method Booker posted doesn't use jQuery, but both of our methods do combine javascript with CSS. With or without jQuery, it's best to let CSS handle the things it can handle, and use javascript only when necessary. Here, javascript is necessary. I used it to toggle between adding and removing a class in a tag, and Booker used it to change the text on a button. From there, CSS targeted the thing we changed with javascript, and it's the CSS that styles, moves, displays or does whatever we want it to do when the element is in whatever state the javascript tells it to be in.
It won't. "active" is the element's state when the mouse button is held down on it, and it's no longer active when the mouse button is released. It doesn't matter what properties you define for the active state, it will still only work when it's in that state, the same way :hover only works while the element is being hovered on.
Hmm. I was under the impression that a link was "active" whenever it has the caret. That's why I thought changing the <div>s to <a>s might help. If I'm wrong about :active this way won't work at all, of course.
I don't know what you mean by "whenever it has the caret."
The standard set by w3c for the :active state is this (emphasis mine):
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
(source: w3.org)
This is why display:block quits working as soon as you release the mouse button, because the element is no longer active. As I said before, display:block was never the problem. The problem was relying on the :active pseudo-class.
If a browser isn't following the web standards that are set by the w3c, they're doing it wrong. Internet Explorer used to hold a link in its active state until it left the page, but that went against web standards, and IE seems to have corrected this behavior at some point.
I hope this clarifies what I was trying to explain.