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?


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 Aug 9 '11 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 Aug 9 '11 at 20:52
  • A link on "jQuery's accordion" would surely help. – Jörn Zaefferer Aug 14 '11 at 21:44
  • @Jorn - Google works wonders: jqueryui.com/demos/accordion – JonH Aug 15 '11 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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