e-addons

Share

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

IMPORTANT:
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

Animations

accordion sections style

Styles

Accordion Bars:

  • Background Color
  • Background Active
  • Borders size and color

Heading:

  • Alignment
  • Color
  • Hove color
  • Active color

Icon:

  • Colors
  • Size
  • Spacing

DEMO

Accordion Sections

Base example

Accordion 1
Accordion 2

This page is Amazing

placeholder

Add Your Heading Text Here

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