Ajax Loader
×

Fading List

Nice fading list / accordion created using hover transitions. The markup is a simple unordered list where list elements are used as the trigger to show the hidden div that contains the hidden information. The fading transition is achieved by using the transition property and transitioning between 0 opacity to 1 opacity.

To make this effect work in CSS-only, we have to define a height of the hidden div which makes it incovenient to add different informations to different list elements. Adding a auto height will not let the div to animate, so there's no choice here rather than having a fixed height for the div. However, this technique can be made useful by using a little JS or jQuery. Have a look at the source code.

Related:

HTML
 
1
 
 
CSS
 
1
 
 
JavaScript
 
1
 
 

Fading List

CSSDeck G+