Close

Flat accordion

This is another example of a simple, flat accordion, designed using HTML, CSS, and JavaScript. The fonts and icons are imported to the code with their URLs, whereas the JavaScript functions have been used to implement the accordion expand feature. The font-family for the form is defined as "JF Flat Regular". The colors and fonts are predefined as variables, which are $Mahogany : #620808, $AppleBlossom : #a53f3f, $GoldenSand : #f4ce74, $EggWhite : #ffe9c1, $OrangeRoughy : #d5441c, and $mainfont : "JF Flat Regular". The body of the form is given a background style of #f6704b. The accordion is given the styles of margin as 50px auto, width as 380px, background as #ccc, and cursor as pointer to get the hand cursor effect. The title of the accordion items is given the styles of height as 100%, padding-left as 50px, font-family as $mainfont, font-size as 20px, and font-weight as 400. Each accordion item is given a different background color and a font color as type(1)- background: $Mahogany, color: $GoldenSand, type(2)- background: $AppleBlossom, color: $EggWhite, type(3)- background: $GoldenSand, color: $Mahogany, type(4)- background: $EggWhite, color: $OrangeRoughy, and last-of-type- background: $OrangeRoughy, color: $EggWhite. Source: https://codepen.io/SoufianeAbid/pen/eZVzBL

Post Comment or Questions

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

Your email address will not be published.