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.
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.
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.