I am currently redesigning an existing site that contains a large number of articles. I'd like to cut out a number of intermediate "category" pages within the site by fitting article links within accordions.

However, it is also important to show short descriptions of articles. What I have in mind right now is rollover within the accordions that would show the short description within the accordion when a user mouses over the link.

When I look around for an example of this behaviour, though, I come up short....can anyone point me to an example?

1 Answer 1


I simply use jQuery's accordion and apply an href style to the actual span so I get this effect:

enter image description here

Is this what you are after? If so here's some markup for you:

<h3><a href="#" class="info">User Documents<span>Print / read manuals on how to use the system.</span></a></h3>

And the CSS for info:

    position:relative; /*this is the key*/


a.info span
    display: none;

a.info:hover span
{ /*the span will display just on :hover state*/
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#377CB1; color:#FFF;
 text-align: center;
  • Hey, thanks very much. It's not quite what I'm after, but I'm not technical enough to know whether the code would need to be significantly different.
    – BJS
    Commented Aug 9, 2011 at 20:50
  • Whoops - sorry. "Enter" didn't do what I expected, there....the end of my statement is that both the area to be hovered and the swappable rollover text appear within one of the accordion panels. But this is great! Thanks again for the help.
    – BJS
    Commented Aug 9, 2011 at 20:52
  • A link on "jQuery's accordion" would surely help. Commented Aug 14, 2011 at 21:44
  • @Jorn - Google works wonders: jqueryui.com/demos/accordion
    – JonH
    Commented Aug 15, 2011 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.