MENU

Accordion with Containers Responsive Element

Element Information

This element allows you to insert other elements inside the sections of an accordion element.

Tutorial

Inserting the Element

  1. Click the "Click to insert new element" link.

  2. Click on "Responsive Elements" to expand that section.

  3. Click on "Accordion (Containers)".

  4. Click "Click here to define the custom element data".

  5. Enter the number of tabs desired, and select desired style.

  6. Save. The result will be a Simple Text Block for the header of each section of the Accordion. The first section is open by default, and shows an empty container.

The Accordion Tab Header

  1. Click "Click here to define the Simple Text Block (without header) element".

  2. Type in text for the accordion header. Click "Save".
    Screen Shot of Simple Text Block Header

    HTML may be used to format header text. For example, the markup for a size 3 header is: <h3>Accordion Section One</h3>

For a brief introduction to HTML headers, you may read the following:

To learn more about HTML, Lynda.com has several tutorials available free to ECU users. Login here for access: http://www.ecu.edu/itcs/lynda/.

Inserting elements inside the accordion sections

The first section is open by default. Click the "Click to insert new element" link to begin adding content to that section.

To work in any other section, simply click on that section's header area to show the "Click to insert new element" link for that section.
Screen Shot of Accordion with Containers header areas

Example of an Accordion with Containers