ic Interface bwe-User Interface

Accordion Sections

Build an accordion from the sections directly on the page.

Ideal on template pages to display content by optimizing space and avoiding unnecessarily long pages.

Sections transformed into accordion directly on the page to optimize the view of the content
accordion sections 1

Accordion Sections

Opening options:

  • The first is open immediately
  • They are all open
  • It opens one at a time

The semantics of the header

Set the sections involved in the accordion.

“Label” is the title that appears in the header.

The #ID section is the unique key of the section. (see info below)

* Get the ID in section element

copypaste element id 1
Right click
copypaste element id 2
Copy ID
copypaste element id 3
Paste in the field


accordion sections style


Accordion Bars:

  • Background Color
  • Background Active
  • Borders size and color


  • Alignment
  • Color
  • Hove color
  • Active color


  • Colors
  • Size
  • Spacing


Accordion Sections

Base example

Accordion 1
Accordion 2

This page is Amazing


Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.