Close

Horizontal Accordion

This is an example of a simple accordion with plain background color, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. JavaScript functions have been used to implement the accordion expand features. The accordion is sectioned into five divisions and given the styles of margin-left as 5px, margin-right as 5px, border-radius as 3px, background color as rgba(220,220,220,.5), transition as all 200ms ease-in-out 50ms, font-family as Helvetica, Arial, Sans-Serif, font-weight as 500, cursor style as pointer to get the hand cursor effect, and font-size as 16pt. It is given a default style set of height as 50vh, width as 10vw, color as rgba(255,255,255,0), font-size as 16pt, and overflow as hidden to hide the content. It takes the styles of height as 50vh, width as 100vw, background as #7ab7ff, color as rgba(255,255,255,1), and padding as 20px, in the expanded mode. Source: https://codepen.io/valaxin/pen/reQMXp

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 *