This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release

The Gravstrap Accordion component handles the Bootstrap accordion component.

The accordion component is defined by the following Yaml code:

gravstrap:
    accordion:
        accordion1:
            from_file: accordion.markdown 
            id: accordion 
            items:
                0:
                    heading_id: headingOne
                    body_id: collapseOne
                    title: Collapsible Group Item 1
                    section: collapse1
                1:
                    heading_id: headingTwo
                    body_id: collapseTwo
                    title: Collapsible Group Item 2
                    section: collapse2
                2:
                    heading_id: headingThree
                    body_id: collapseThree
                    title: Collapsible Group Item 3
                    section: collapse3

This code must be added to the page where you need to display the component.

from_file property

The from_file property defines the file which contains the contents for each accordion sub-panel. This file must be added under the page where the component is displayed and it is structured as follows:

[SECTION collapse1]

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

[/SECTION]

[SECTION collapse2]

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et

[/SECTION]

[SECTION collapse3]

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

[/SECTION]

Each section name is related to the item who displays the content of the section itself.

id property

The id property defines the same HTML property for the accordion. If you need more than one accordion on the same page, be sure to add a different id for each accordion you define.

items property

The items property is an array which defines the elements displayed in the accordion component.

item's heading_id property

The heading_id property defines the same HTML property for the accordion header.

item's body_id property

The body_id property defines the same HTML property for the accordion body.

item's title property

The title property defines the accordion sub-panel title content

item's section property

The section property defines the item section name where it is defined the accordion sub-panel content

Render the accordion component

Add the following code to the template where you need to render the accordion component:

{{ gravstrap.accordion1 }}

Next Post Previous Post