Skip to main content

Accordion

Introduction​

This module allows an easy and fast creation of accessible accordions to be used as FAQ sections, description lists etc.

Usage​

"Accordion" module is available in the list of modules. We can add it anytime. This is a monolith module, which means it cannot have children modules. It is also a composite module, which means it comes with demo static content and some styling.

Content​

The data must be inserted into "Content" setting in the format of stringified JSON. Also we can insert a data variable and its value will be stringified automatically.

The data must be an array of objects with keys:

  1. name - for description term (e.g. it is a "question" in FAQ section)
  2. text - for description definition (e.g it is an answer part of FAQ section) Attention! Any other keys will simply not work!

The module automatically adds microdata type "FAQPage" in the format of JSON-LD to the page (in the header).

We have tutorials of creating a FAQ page and using Accordion module:

Styling​

Accordion includes several CSS variables for quick styling:

--bldr-accordion-border-top: 1px solid #555;
--bldr-accordion-icon-color: black;
--bldr-accordion-title-color: black;
--bldr-accordion-text-color: #616161;

These variables are added in "CSS Variables" setting (under "CSS Settings" tab).

Other parts of Accordion module, including its internal automatically generated HTML can be styled by using custom CSS selectors.

For developers / API​

info
  • HTML tag name: <builderius-accordion>
  • Implements 3rd-party script: none
  • Allowed children modules: none
  • Available since: 0.9.6 FREE

Example of HTML generated​


<builderius-accordion class="uni-node-uba33e7ba7"
                      data-content="[{&quot;name&quot;: &quot;Some question?&quot;, &quot;text&quot;: &quot;Some answer here&quot;},{&quot;name&quot;: &quot;Some question2?&quot;, &quot;text&quot;: &quot;Some answer here&quot;}]">
    <div class="description-term">
        <button id="accordion-header-i99y6w1ss" aria-controls="accordion-panel-i99y6w1ss" aria-expanded="false"
                data-accordion-header="true">Some question?<span aria-hidden="true"><i class="plusIcon"></i></span>
        </button>
    </div>
    <div class="description-details" id="accordion-panel-i99y6w1ss" aria-labelledby="accordion-header-i99y6w1ss"
         role="region" hidden="">Some answer here
    </div>
    <div class="description-term">
        <button id="accordion-header-wy14dh8g9" aria-controls="accordion-panel-wy14dh8g9" aria-expanded="false"
                data-accordion-header="true">Some question2?<span aria-hidden="true"><i class="plusIcon"></i></span>
        </button>
    </div>
    <div class="description-details" id="accordion-panel-wy14dh8g9" aria-labelledby="accordion-header-wy14dh8g9"
         role="region" hidden="">Some answer here
    </div>
</builderius-accordion>

API docs​

Similar to other interactive modules, Accordion module uses HTML attributes, which take part of the module's API. An example: HTML attribute data-content which holds the value of "Content" setting.

Read more the full list of attributes, events and methods below:

Attributes​

data-content - (required) a stringified JSON array; also can be added via data variable;

Events​

rendered (scope: element)​

builderius-accordion-rendered (scope: window)​

Custom event that is being dispatched every time Accordion renders (and re-renders) its content; this event passes some data:

{
    el, content
}

where

  • el is the reference to Accordion Node element
  • content is a JSON with content data used

Methods​

reInit​

This method resets and initiates the component.

Demo​

Demo page