Collapsing blocks
Basic Setup
To enable collapse tabs for an entity, follow these steps:
Add the
collapse-tabs
class to the block with thearticle__header
class.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?