TOC => Accordion

Accordion

Easily define and populate vertically collapsing content areas using BootStrap's collapse plugin.

This is a basic accordion with three sections defined. Any number of sections may be added, and they may contain any of the content widgets that a container may hold.

This is the first item's accordion body. It is shown on page load because the 'Show on load' attribute is checked in its settings. It may also be set to always be open. An accordion body may contain any number of containers. 

This is the second item's accordion body. It is closed on page load because the 'Show on load' attribute is not checked in its settings. It may also be set to always be open. An accordion body may contain any number of containers. 

This is the third item's accordion body. It is closed on page load because the 'Show on load' attribute is not checked in its settings. It may also be set to always be open. An accordion body may contain any number of containers. 

The Accordion Admin Panel

The accordion's settings are organized into three tabs: Content, layout and Style.

   The Content Tab


      Title

      The internal name of the accordion widget. This title is not rendered with the control.

      Render Flush

     Check 'Render Flush' to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. Below is an example of a flush accordion:

This is the first item's accordion body. It is closed on page load because the 'Show on load' attribute is not checked in its settings. It may also be set to always be open. An accordion body may contain any number of containers. 

This is the second item's accordion body. It is closed on page load because the 'Show on load' attribute is not checked in its settings. It may also be set to always be open. An accordion body may contain any number of containers. 

This is the third item's accordion body. It is closed on page load because the 'Show on load' attribute is not checked in its settings. It may also be set to always be open. An accordion body may contain any number of containers. 

      Section List

      This is the collection of expanding sections contained in the accordion. 

  • You may rearrange sections by using the Drag-and-drop handles on the left of each section
  • You may delete a section by selecting its red trashcan icon
  • You may open a section for editing by selecting the > button just to the left of its title (Accordion sections and their controls are discussed later in this document)

      Add Item button

      This will add a new Accordion section to the bottom of the section list.


   The Layout Tab


      Padding

      This will add space around the inside of the accordion container. The following values are available:

  • p-1 thru p-5: pads all sides
  • py-1 thru py-5: pads the top and bottom
  • pt-1 thru pt-5: pads the top
  • pb-1 thru pb-5: pads the bottom
  • px-1 thru px-5: pads the right and left
  • ps-1 thru ps-5: pads the left
  • pe-1 thru pe-5: pads the right

       See the Bootstrap docs for details on spacing classes.

      Margin

     This will add space around the outside of the accordion container. The following values are available:

  • m-1 thru m-5: pads all sides
  • my-1 thru my-5: pads the top and bottom
  • mt-1 thru mt-5: pads the top
  • mb-1 thru mb-5: pads the bottom
  • mx-1 thru mx-5: pads the right and left
  • ms-1 thru ms-5: pads the left
  • me-1 thru me-5: pads the right

      See the Bootstrap docs for details on spacing classes.

   The Style Tab


      DropShadow

      This will apply a drop shadow to the accordion.  you may choose between: no shadow, small shadow, default shadow or large shadow.

The Accordion Section panel

Accordion sections are managed using this panel


      Title

      The name of the section.  It will be rendered in the collapse control at the top of the section

      Show on Load

      If this checkbox is selected, then the section will be open and visible when the page loads.

      Always Open

      If checked, the section will never collapse, and will be visible regardless of the state of the other sections.

      Content List

      The add (+) button at the bottom will allow you to add only Container widgets. 

  • You may rearrange the containers by using the Drag-and-drop handles on the left of each section
  • You may delete a container by selecting its red trashcan icon
  • You may open a container for editing by selecting the > button just to the left of its title (refer to the container page for more details)


Page Contents
Back to TOC

Accordion