Close

CSS Accordion

This is another example of a web form with an accordion feature, designed using CSS, HTML, and Bootstrap framework 4. The fonts and icons are imported to the code with their URLs. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the child elements of the accordion in an orderly manner. The body of the form is given the styles of font-family as 'Lato', sans-serif, and background as #e74c3c, whereas the title of the form is given the styles of color as #fff, text-align as center, margin-top as 2em, font-weight as 200, and font-size as 80px. The wrapper section of the accordion is given a background color of #3D464E. The cursor style for the accordion child elements is set as pointer to get the hand cursor effect. The child elements are given the styles of border-right as 1px solid #3D464E, float as left, overflow as hidden to hide the details in normal state, height as 177px, width as 72px, transition as all 0.5s ease, and background as #fff. In a hover event, the items take a width of 350px to expand the details. Source: https://codepen.io/larrygeams/pen/DyiBb

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 *

Several Related Snippets

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