Close

Full Page Horizontal Accordion

This is an example of a horizontal accordion, designed using HTML, CSS, and Bootstrap framework 4. The fonts are imported to the code with its URL. The colors used in the form are predefined. The body of the form is given the styles of background as $clr-bg, color as $clr-text, and font-family as 'Open Sans', sans-serif. The accordion is given four child elements, which are given the styles of display, block, float as left, height as 100vh, width as 40px, overflow as hidden to hide the content, background as $clr-bg-light, text-align as center, font-size as 14px, line-height as 40px + 10, and transition as background 300ms ease. In a hover event, the background color of the child elements turn to $clr-primary and gets the cursor style as pointer t get the hand cursor effect. The accordion child element title is given a transform effect of rotate(90deg), which turns to display none in a checked event, which hides the title when the element is clicked. Source: https://codepen.io/milesmanners/pen/QEQPjw

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 *