Collapsing blocks

Basic Setup

To enable collapse tabs for an entity, follow these steps:

  1. Add the collapse-tabs class to the block with the article__header class.

  2. The entity structure must match the following template:

<article class="article">
    <div class="article__header collapse-tabs">
        <div class="header-left">
        </div>
        <div class="header-right">
        </div>
    </div>
    <th:block th:insert="~{/common/view-main :: tabs(${tabs})}"/>
</article>

Additional Settings

1. Disabling Default Opening of the First Tab

To prevent the first tab from opening automatically, pass the defaultNotActive = true parameter:

<th:block 
    th:insert="~{/common/view-main :: tabs(${tabs})}"
    th:with="defaultNotActive = true"
/>

2. Setting a Default-Open Entity

To make an entity open by default (when others are closed), add the default-show-tabs class to the wrapper block:

<article class="article default-show-tabs">
    <div class="article__header collapse-tabs">
        <!-- Header content -->
    </div>
    <th:block th:insert="~{/common/view-main :: tabs(${tabs})}"/>
</article>

Last updated

Was this helpful?