Here Are the Steps to the Video:

Creating the First Section of the Accordion

Grab a new container and drag it on to your website canvas. Rename this container “Accordion” in the Page Structure Panel to make identifying it easier. You will also need to:

  1. Add 30px of margin to the top of Accordion container.
  2. Give Accordion container a 900px width in the Dimensions Panel.

Drag a new container into Accordion container and rename it “Outer 1”.

  1. In the Border Panel (formerly the Stroke Panel) select “underline border”.

Drag a Grid Element and place it into Outer 1 container.

  1. Collapse one column of the grid by dragging the column next to another column (or the side of the grid) and releasing your mouse button.
  2. Move the remaining column to the right so the opening is at the second smallest preset width.
  3. Give the grid a white background fill color using the Color Panel.

Drag a Text Element into the left side of the grid. 

  1. Inside the text element, input the text “Accordion One”.
  2. Assign the text an h2 value (see Global Styles for more information on heading values).
  3. Add 14px top padding, make the text element height: 60px.

Drag an Image Element into the right side of the grid.

  1. Make the image element align right, using the Alignment Panel.
  2. Open the Media Library and drag in an arrow icon.
  3. In the Dimensions Panel, make the image element 60px wide.

Drag the handles on the bottom of the grid and zip it up so the height defaults to the height of the element inside it, “Accordion One”.

Drag a new container and place it below the grid.

  1.  Rename this container “Accordion 1 Contents” in the Page Structure Panel to make identifying it easier.
  2. Drag a new text element into Accordion 1 Contents.
  3. Paste in filler text (this will be text that is hidden from view but appears with a command) and assign it an h4 value.
  4. Add 10px bottom padding and grab the bottom of the text container to zip up.

Duplicating Multiple Accordions 

Select Outer 1 in the Page Structure Panel and use Alt + Drag to duplicate it and place it underneath the original.

  1. Rename it “Outer 2”.
  2. Change “Accordion One” to “Accordion Two” for the heading text.
  3. Rename “Accordion 1 Contents” to “Accordion 2 Contents”
  4. Paste in filler text (this will be text that is hidden from view but appears with a command) into the text box.
  5. Grab the bottom of Outer 2 container and zip it up (if needed).

Select Outer 2 in the Page Structure Panel and use Alt + Drag to duplicate it abd place it underneath the original.

  1. Rename it “Outer 3”.
  2. Change “Accordion Two” to “Accordion Three” for the heading text.
  3. Rename “Accordion 2 Contents” to “Accordion 3 Contents”
  4. Paste in answer text (this will be text that is hidden from view but appears with a command) into the text box.
  5. Grab the bottom of Outer 3 container and zip it up (if needed).

Setting Up the Positioning

  1. Select Accordion 3 Contents from the Page Structure Panel, from Position Panel select “Fix To Parent Element” from the dropdown menu.
  2. Also, make the Z Arrange Order: -11.
  3. Repeat the steps for the remaining accordion content containers, i.e., Accordion 2 Contents and Accordion 1 Contents.

Select Outer 3, and also:

  1. Make sure the Hide Overflow box is checked in the Dimensions Panel.
  2. Grab the bottom of the container and zip up Outer 3 (if needed).
  3. Repeat these steps for Outer 2 and Outer 1.

Making the Interaction

  1. Select the arrow image for Accordion One row and click the “+” button in the Interactions Panel.
  2. Name your interaction and click “Submit”.
  3. Verify that “On Click” and “Toggle” are selected in the dropdown for that interaction.

While in Interaction Mode: 

  1. Open the Transform Panel, and in Rotate field enter: 90 degrees.
  2. Grab the bottom of Outer 1 container and drag it open.
  3. Select Accordion 1 Contents and switch its positioning to “Normal Positioning” in the Position Panel.
  4. Adjust the opening of Outer 1 container so it’s just big enough for the text in Accordion 1 Contents to show.
  5. Repeat these steps for the remaining Accordion Two and Accordion Three.
  6. Adjust the Accordion container (the outermost container that has all the contents) accordingly per Device Mode.
Did this answer your question?