Close

Simple Bootstrap Accordion

This is another example of a simple horizontal accordion, designed using HTML, CSS, and Bootstrap framework 4. The accordion is given 4 child elements. The accordion is given the styles of top and left as 100px, background as linear-gradient (bottom,#eaeaea, #fafafa), padding as 10px, display as inline-block, box-shadow as 0 1px 1px rgba(0,0,0,.65), border-radius as 3px, border as solid 1px #ddd, width as 460px, height as 200px, and overflow as hidden to hide the content. In a hover or checked event, the background of the accordion item turns to #4D90FE, and get the styles of border as solid 1px rgba(0,0,0,.15), font color as white, box-shadow as 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset, and text-shadow as 0 -1px 0 rgba(0,0,0,.6). The label of the accordion item is given a font-family style as Helvetica and cursor style as pointer to get the hand cursor effect. The accordion item content has the styles of font color as #333, font-size as 12px, line-height as 18px, width as 245px, and padding as 5px 10px. Source: https://codepen.io/sfearl1/pen/cdrpk

Post Comment or Questions

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

Your email address will not be published.