Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer

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:

a.info{
    position:relative; /*this is the key*/
    z-index:24;
    color:Navy;
    text-decoration:none;   
}

a.info:hover
{
    z-index:25; 
}

a.info span
{
    display: none;
}

a.info:hover span
{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#377CB1; color:#FFF;
 text-align: center;
}
share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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