Breadcrumb

    About

    Allow your users to toggle the visibility of a region's content on the page.

    Set Collapsible as Region Template.

    Examples

    1. Default

    Collapsible Region

    Region Body

    Region Template Options

    • Use DefaultYes
    • Default StateExpanded
    • Advanced Body OverflowScroll - Default

    2. Collapsed State

    Region Template Options

    • Use DefaultYes
    • Default StateCollapsed
    • Advanced Body OverflowScroll - Default

    3. Scrolling Body

    Collapsible Region

    Region Body

    Region Body

    Region Body

    Region Template Options

    • Use DefaultYes
    • Body Height240px
    • Default StateExpanded
    • Advanced Body OverflowScroll - Default

    Template Options

    • General

      • Use Template Defaults
      • Remove Body Padding
        Removes padding from region body.
      • Remember Collapsible State
        This option saves the current state of the collapsible region for the duration of the session.

    • Default State

      Sets the default state of the region.

      • Expanded
      • Collapsed

    • Body Height

      Sets the Region Body height. You can also specify a custom height by modifying the Region's CSS Classes and using the height helper classes "i-hXXX" where XXX is any increment of 10 from 100 to 800.

      • Auto - Default
      • 240px
        Sets region body height to 240px.
      • 320px
        Sets region body height to 320px.
      • 480px
        Sets body height to 480px.
      • 640px
        Sets body height to 640px.

    • Accent

      Set the Region's accent. This accent corresponds to a Theme-Rollable color and sets the background of the Region's Header.

      • Default
      • Accent 1
      • Accent 2
      • Accent 3
      • Accent 4
      • Accent 5

    • Style

      Determines how the region is styled. Use the "Remove Borders" template option to remove the region's borders and shadows.

      • Default
      • Remove Borders
        Removes borders from the region.
      • Stack Region
        Removes side borders and shadows, and can be useful for accordions and regions that need to be grouped together vertically.
      • Remove UI Decoration
        Removes UI decoration (borders, backgrounds, shadows, etc) from the region.
    • Advanced

      Body Overflow

      Determines the scroll behavior when the region contents are larger than their container.

      • Scroll - Default
      • Hide
    • Advanced

      Item Padding

      Sets the padding around items within this region.

      • Default
      • Slim Padding
        Reduces form item padding to 4px.
      • Remove Padding
        Removes padding between items.
    • Advanced

      Item Size

      Sets the size of the form items within this region.

      • Default
      • Large
      • X Large
    • Advanced

      Item Width

      Sets the width of the form items within this region.

      • Default
      • Stretch Form Fields
    • Advanced

      Label Alignment

      Set the label text alignment for items within this region.

      • Right
      • Left
        Align form labels to left.
    • Advanced

      Label Position

      Sets the position of the label relative to the form item.

      • Inline - Default
      • Show Form Labels Above
        Show form labels above input fields.
    • Advanced

      Top Margin

      Set the top margin for this region.

      • Default
      • None
        Removes the top margin for this region.
      • Small
        Adds a small top margin to the region.
      • Medium
        Adds a medium top margin to the region.
      • Large
        Adds a large top margin to the region.
    • Advanced

      Bottom Margin

      Set the bottom margin for this region.

      • Default
      • None
        Removes the bottom margin for this region.
      • Small
        Adds a small bottom margin to the region.
      • Medium
        Adds a medium bottom margin to the region.
      • Large
        Adds a large bottom margin to the region.
    • Advanced

      Left Margin

      Set the left margin for this region.

      • Default
      • None
        Removes the left margin from the region.
      • Small
        Adds a small left margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.
    • Advanced

      Right Margin

      Set the right margin for this region.

      • Default
      • None
        Removes the right margin from the region.
      • Small
        Adds a small right margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.

    Button Positions

    Collapsible Region With Buttons

    Region Body