components-accordion.md

Components

This theme ships some components (as twig macros) that hide the complexity of rendering the same elements over and over again with the correct HTML.

See Tabler documentation at https://preview.tabler.io/accordion.html

Accordion

Parameters

accordion() macro, waits for 2 parameters:

Parameter	Description	Type	Default
items	Array of Item	array	[]
options	Options object	object	{}

Item

Parameter	Description	Type	Default
title	Title of the item	string	empty string
body	Content of the item, can be HTML with raw option	string	empty string
options	Customize the Item Options	object	{}

Item Options

Parameter	Description	Type	Default
open	Item should be opened by default	boolean	false
titleExtraClass	Add extra class to the title	string	empty string
bodyExtraClass	Add extra class to the body	string	empty string

Options

Parameter	Description	Type	Default
id	Set custom id to accordion	string	tabler_unique_id('accordion_')
raw	Use raw output for title and body	boolean	true
flush	Remove certains styles (see Boostrap docs)	boolean	false
alwaysOpen	Holds the accordion elements open (see Bootstrap Doc)	boolean	false
extraClass	Add extra classes on accordion container	string	empty string

Usage

{% from '@Tabler/components/accordion.html.twig' import accordion %}

{% set items = [
    {
      'title': 'Title 1',
      'body': 'Body 1',
    },
    {
      'title': 'Title 2',
      'body': 'Body 2',
      'options':
      {
        'open' : true,
        'titleExtraClass': 'bg-success text-white',
        'bodyExtraClass': 'bg-danger pt-3',
      },
    },
    {
      'title': 'Title 3',
      'body': 'Body 3',
      'options':
      {
        'extraClass': 'bg-danger-lt'
      }
    },
    {
      'title': '<div>Title 4 <strong>with HTML</strong></div>',
      'body': '<div>Body 4 <strong>with HTML</strong></div',
    },
] %}

{% set options = {
    'id': 'example-accordion',
    'raw': true,
    'alwaysOpen': false,
    'extraClass': 'mb-0',
} %}

{{ accordion(items, options) }}

Next steps

Please go back to the Tabler bundle documentation to find out more about using the theme.