Block Description

The BS > Accordion Item Block is a dynamic container within the BS > Accordion Block that holds a single item of an accordion list. It is essential for displaying content that is hidden or revealed as users interact with the accordion, providing a clean, organized method for displaying large amounts of content.

Block Features

The BS > Accordion Item Block offers various features:

• Customizable item name and initial state.
• A required HTML anchor for direct access.
• Customizable background color and typography, including text color, justification, and alignment.
• Comprehensive wrapper styles for margins, padding, border color, shadow, position, and display.
• A block visibility setting to control where and when the block appears.
• An advanced option to apply additional custom CSS classes.

Block Options

Content

• Item
  • NAME (Text Input): Specify the name of the accordion item, which will be displayed as the title of the section.
  • HTML ANCHOR (Text Input – Required): Input a unique word or phrase to create a specific web address for this item. This allows you to link directly to this section of the accordion.
  • INITIAL STATE (Dropdown): Set the initial state of the accordion item (either open or closed).

Style

• Background
  • BACKGROUND COLOR (Dropdown Color Palette): Select a background color for the accordion item.
• Typography
  • TEXT COLOR (Dropdown Color Palette): Choose a color for the text within the accordion item.
  • Text Justify (Checkbox): Enable or disable text justification within the accordion item.
  • TEXT ALIGN (Dropdown): Adjust the alignment of the text within the accordion item (left, right, or center).

Advanced

• 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).
• Visibility Conditions
  • BLOCK VISIBILITY (Set Block Visibility): Control where and when the block is visible based on specific conditions such as user roles or device size.
• 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.