BlockStrap Documentation

BS > Accordion

Block Description

The BS > Accordion Block is a dynamic content container designed for building and managing an accordion list on your webpage. Accordion lists are excellent for presenting multiple sections of content, where each section expands upon click, revealing the associated content, and contracting when clicked again.

Block Features

The BS > Accordion Block offers various customization features:

  • Choice between default and flush styles for the accordion.
  • Options to either leave other items open or close them when a new tab is clicked.
  • Customizable text alignment and justification within the accordion.
  • Extensive wrapper styles settings for margins, padding, border color, shadow, position, and display.
  • The ability to set an HTML anchor for the block.
  • An advanced option to apply additional custom CSS classes.

Block Options


  • Accordion
    • STYLE (Dropdown): Select the preferred style for the accordion – either default or flush.
    • TAB CLICK (Dropdown): Choose whether to leave other items open or closed when a new accordion tab is clicked.
    • HTML ANCHOR (Text Input): Set a unique word or phrase (without spaces) to create a specific web address for this accordion block. This allows you to link directly to this section of your page.
    • Text Justify (Checkbox): Enable or disable text justification within the accordion.
    • TEXT ALIGN (Dropdown): Adjust the alignment of the text within the accordion (left, right, or center).


  • Wrapper Styles
    • Margins (Input Fields): Set the margin values for the top, right, bottom, and left sides of the block.
    • Padding (Input Fields): Adjust the padding values for the top, right, bottom, and left sides of the block.
    • BORDER COLOR (Dropdown Color Palette): Choose a color for the border of the block.
    • SHADOW (Dropdown): Select an intensity level to apply a box shadow to the block.
    • POSITION (Dropdown): Define the block’s position relative to other elements.
    • DISPLAY (Dropdown): Select a display option for the block (e.g., block, inline-block, flex).
  • Advanced
    • ADDITIONAL CSS CLASS(ES) (Text Input): Add one or more custom CSS classes to the block, separated by spaces. These classes can be used to target the block with additional CSS rules in your theme or custom CSS file for further customization.