Close

Material Design Accordion

This is another example of an accordion, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. Materialize UI component library has been used in CSS to design the interface of the accordion whereas the JavaScript functions have been used to implement the accordion expand features. 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 accordion items in an orderly manner. The body of the form is given the styles of font-family as 'Open Sans', sans-serif, color as rgba(0,0,0,0.8), line-height as 1.5, and font-size as 14px. The title of the form is given the styles of text-align as center, font-size as 1.5rem, padding as 0px 30px, and font-family as "Quicksand", with the text-transform set as uppercase to automatically convert the text to uppercase. The text color of the title is set as #1E4A6F. The cursor style is given as pointer for the accordion blocks to get the hand cursor effect. The accordion item blocks take a box shadow effect of 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15), in the active mode. Source: https://codepen.io/renanpupin/pen/oXmPWL

Post Comment or Questions

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

Your email address will not be published.

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.