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.