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:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Fading List

    CSSDeck G+