Close

Accordion with hover effect

This is an example of an accordion with hover effects, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The body of the form is given the styles of background-color as grey, and font-family as 'Titillium Web', sans-serif, whereas media quarries have been used to increase the responsiveness of the form. The JQuery slidetoggle method has been used to implement the collapsible and toggle features for the accordion items. The accordion item is given the styles of font-size as 1.5vw, width as 100%, background-color as orange, padding as 1.5vw, cursor as pointer to get the hand cursor effect in a hover event, margin-top as 0.5vw, background-color as #eeeeee, text-align as left, and font color as #9e9e9e. In a hover event, the accordion item blocks take an animation with the styles of animation-duration as 1s, animation-fill-mode as forwards, and animation-iteration-count as 1. The collapsible section is given a font-size as 1.2vw, font color as #757575, and background-color as white. Source: https://bbbootstrap.com/snippets/accordion-hover-effect-26103860

Post Comment or Questions

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

Your email address will not be published. Required fields are marked *

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.