This is an example of a product filter with an accordion feature and checkboxes, designed using HTML, CSS, and Bootstrap framework 4. Media quarries have been used to increase the responsiveness of the form. The body of the form is given a background color of #f5f6f7. The panel heading is given the styles of font-family as 'Glyphicons Halflings, display as block, padding as 10px, color as #555, font-size as 11px, text-transform as uppercase to automatically convert the text to uppercase, letter-spacing as 1px, and word-spacing as 3px. The panel heading is given a transform style of rotate(180deg) to implement the collapsible effect. The checkboxes are given a height and a width of 24px, font color #fff, cursor style as pointer to get the hand cursor effect in a hover event. The checkboxes take the color of #9faab7 in a hover event, and #2874ef in a checked event. The checkbox text is given a font-family of "Font Awesome 5 Free, and a font-size of 14.66667px. The Refine search button is given a background color of #2874ef, and a font-size as 12px. Source:https://bbbootstrap.com/snippets/refine-product-filter-sidebar-collapse-accordion-custom-checkbox-98247635
This is a template of a web form with an accordion menu, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UI and LI components. UI element has been used with the child elements of LI to display the accordion items in an orderly manner. The form is given a background color of #fcdc29. The main menu wrapper is given the styles of width as 250px, display as block, and border-radius as 10px, whereas the main menu button has the styles of display as block, padding as 15px 20px, background-color as #ff6f61, color as #fff, and position as relative. The submenu section has the styles of background as #273057, overflow as hidden to hide the visibility in the shrink mode, and transition as max-height 0.7s. The submenu content has the styles of color as #fff, font-size as 14px, and border-bottom as 1px solid #394c7f. In a hover event, the sub-menu items take the styles of background as linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%), transition as all 0.3s, and border-bottom as 1px solid #394c7f. Source: https://codepen.io/ahmadbassamemran/pen/zXwZKo
This is an example of an accordion that displays the details and summary, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given the styles of font-family as "IBM Plex Sans", sans-serif, and background-color as rgba(0,0,0,.1), whereas the header of the form is given the styles of margin as 20px auto 80px, font-size as 38px, font-weight as 300, text-align as center, letter-spacing as 2px, and line-height as 1.5. The details section of the accordion has the styles of width as 75%, min-height as 5px, max-width as 700px, padding as 45px 70px 45px 45px, margin as 0 auto, position as relative, font-size as 22px, border as 1px solid rgba(0,0,0,.1), border-radius as 15px, box-sizing as border-box, and transition as all .3s. The summary section of the accordion is given the styles of display as flex, justify-content as space-between, align-items as center, font-weight as 500, and cursor as pointer to get the and cursor effect. The summary section takes a style of box-shadow as 0 0 0 4px #f6f7f8, 0 0 0 5px rebeccapurple, in a focused event. Source: https://codepen.io/frogmcw/pen/deqRwa
This is an example of a quote cards grid layout with the content displayed in an accordion, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The quotes are imported to the code with the URL, whereas the JavaScript functions have been used to implement the accordion expand feature. The body of the form is given the styles of background as #e6e6e6, padding as 50px 0, font-family as 'Noto Serif', serif. The quote cards can be displayed either in card layout or row layout. The quote grid is given the styles of max-width as 1000px, margin as 0 auto, font-family as 'Noto Serif', serif, theme-color-primary as #383838, and color as #414141. The quote caption has the styles of color as #414141, font-size as 40px, and font-weight as bold. The quote cards take the styles of border-radius as 10px, margin as 10px, and box-shadow as 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09), in the card layout. The accordion of the card is given the styles of position as relative, display as block, background as #f7f7f7, border-radius as .25em, cursor style as pointer to get the hand cursor effect, margin-bottom as .125em, padding as .75rem 1em, z-index as 20, border as 1px solid #cccccc, text-align as center, and font-size as 13px, which takes the background color of #ccc, in a hover event. Source: https://codepen.io/zinggrid/pen/ZVJZEM