Close

Hover activated accordion with default state

This is an example of a web form with an accordion feature, which gets activated on hover, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a background color of #222. The accordion item is given a style set of font-family as "PT Sans" sans-serif, background-image as linear-gradient (90deg, #eee, #f5f5f5, #eee), border-bottom as 1px solid #666, padding as 1em, and color as #eee, whereas the accordion header title is given a margin as 0. The accordion is given 4 child elements and each of the element is given a background color of HSL(200, 80%, 60%), HSL(280, 60%, 45%), HSL(40, 80%, 40%), and HSL(80, 40%, 40%), respectively. The overflow of the child elements is defined as hidden to hide the details in normal state and the transition style is defined as height .25s, to expand the details in a hover event. The 3rd child element is given the style of height as 6em to expand the details by default. Source: https://codepen.io/uniqname/pen/gKmpz

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.