Bootstrap Accordion Layout
This is an example of a Bootstrap accordion, designed using HTML, CSS, and Bootstrap framework 4. The form has two accordions that have different expanding styles. The body of the form is given the styles of color as #2c3e50, background as #ecf0f1, and padding as 0 1em 1em. The title of the form is given the styles of line-height as 2, and text-align as center, whereas the accordion titles are given the styles of margin as 0 0 .5em, and font-weigh as normal. The accordions are given the styles of display as flex, justify-content as space-between, padding as 1em, background as #2c3e50, font-weight as bold, and cursor as pointer to get the hand cursor effect. In a hover event and a checked event, the background of the accordions turn to darken($#2c3e50, 10%). The accordion tabs take a transform effect of rotate(90deg) to hide the content, in the shrink mode.