The Gravstrap Accordion shortcode handles a Bootstrap accordion component. Here is a live example:

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.

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.

The accordion shortcode, shown above, is defined by the following definition:

[g-accordion id=accordion1 name=accordion1]
[g-accordion-item id=accordion_item1 header_id=accordion_header1 title="Open me"]

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.

[/g-accordion-item]
[g-accordion-item id=accordion_item2 header_id=accordion_header2 title="Open me too"]

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.

[/g-accordion-item]
[/g-accordion]

Shortcode parameters

The [g-accordion] shortcode has some optional parameters:

  • name - defines an unique component name.
  • id - defines the same name HTML property.

The [g-accordion-item] shortcode, which defines each accordion panel, has the following parameters:

  • id - defines the same name HTML property
  • heading_id - defines the heading id
  • title - defines the accordion panel title

Render the accordion component using the template

The accordion component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$accordion = array(
    'id' => 'accordion1',
    'name' => 'accordion1',            
    'items' => array(
        array(
            'id' => 'accordion_item1',
            'header_id' => 'accordion_item1',
            'title' => 'An awesome title',
            'content' => 'Anim pariatur cliche reprehenderit enim eiusmod high life accusamus terry richardson ad squid.',
        ),
        array(
            'id' => 'accordion_item2',
            'header_id' => 'accordion_item2',
            'title' => 'Another awesome title',
            'content' => '3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.',
        ),
    ),
);

$this->grav['twig']->twig_vars['accordion'] = $accordion;

then in your template you will render the accordion as follows:

{% include 'bootstrap/accordion.html.twig' with accordion %}

Please note that the provide content is raw: it's up to you to provide a formatted one.

Next Post Previous Post