Common parameters
Synchronization
Tabs, radio buttons, accordions, and dropdowns support synchronization — switching identical elements on the page. To do this, use the group attribute.
The selected element is remembered and automatically opens on all pages of the documentation project with the same group value. For example, by selecting the MacOS tab on one page, the user will see it active on all pages. The state of interactive elements is preserved after the page is reloaded.
Examples
{% list tabs group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Result:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
{% list tabs radio group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs radio group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Result:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
{% list tabs accordion group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs accordion group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Result:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
{% list tabs dropdown group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs dropdown group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Result:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
Default element
If you need the element to be expanded by default, add the {selected} attribute to it.
Examples
{% list tabs %}
- Название таба 1
Текст таба 1.
- Название таба 2 {selected}
Пункт будет открыт по умолчанию.
- Название таба 3
Текст таба 3.
{% endlist %}
Result:
Tab 1 text.
The item will be open by default.
Tab 3 text.
{% list tabs radio %}
- Название пункта 1
Текст.
- Название пункта 2 {selected}
Пункт будет открыт по умолчанию.
- Название пункта 3
Текст.
{% endlist %}
Result:
Text.
The item will be open by default.
Text.
{% list tabs accordion %}
- Название пункта 1
Контент для пункта 1.
- Название пункта 2 {selected}
Пункт будет открыт по умолчанию.
- Название пункта 3
Контент для пункта 3.
{% endlist %}
Result:
Content for item 1.
The item will be open by default.
Content for item 3.
{% list tabs dropdown %}
- Название пункта 1
Контент для пункта 1.
- Название пункта 2 {selected}
Пункт будет открыт по умолчанию.
- Название пункта 3
Контент для пункта 3.
{% endlist %}
Result:
Content for item 1.
The item will be open by default.
Content for item 3.
Links to active elements
The selected element is saved in the URL as the ?tab=name_value parameter, allowing you to share a direct link to it.