Examples
Examples of the accordion module
Default
<div class="tabs" data-tabs>
<div class="tabs__header">
<span class="tabs__button" data-tab-button="tab1">Tab 1</span>
<span class="tabs__button" data-tab-button="tab2">Tab 2</span>
<span class="tabs__button" data-tab-button="tab3">Tab 3</span>
</div>
<div class="tabs__item-content" data-tab-content="tab1">
<h3>Tab 1 Content</h3>
<p>This is the content for Tab 1. You can place any information here.</p>
</div>
<div class="tabs__item-content" data-tab-content="tab2">
<h3>Tab 2 Content</h3>
<p>This is the content for Tab 2. You can use it for additional information.</p>
</div>
<div class="tabs__item-content" data-tab-content="tab3">
<h3>Tab 3 Content</h3>
<p>This is the content for Tab 3. Important information can also be presented here.</p>
</div>
</div>.tabs {
.tabs__item-content {
padding: 20px;
}
.tabs__button {
&.active {
background-color: #0056b3;
}
}
}<script type="module">
import { tabs } from "wskit";
tabs.run();
</script>Tab 1 Content
This is the content for Tab 1. You can place any information here.
Tab 2 Content
This is the content for Tab 2. You can use it for additional information.
Tab 3 Content
This is the content for Tab 3. Important information can also be presented here.
Active class mode
Set data-active-button-class="{class}" and data-active-content-class="{class}" attribute
<div class="tabs" data-tabs data-active-button-class="custom-button-class" data-active-content-class="custom-content-class">
<div class="tabs__header">
<span class="tabs__button" data-tab-button="tab1">Tab 1</span>
<span class="tabs__button" data-tab-button="tab2">Tab 2</span>
<span class="tabs__button" data-tab-button="tab3">Tab 3</span>
</div>
<div class="tabs__item-content" data-tab-content="tab1">
<h3>Tab 1 Content</h3>
<p>This is the content for Tab 1. You can place any information here.</p>
</div>
<div class="tabs__item-content" data-tab-content="tab2">
<h3>Tab 2 Content</h3>
<p>This is the content for Tab 2. You can use it for additional information.</p>
</div>
<div class="tabs__item-content" data-tab-content="tab3">
<h3>Tab 3 Content</h3>
<p>This is the content for Tab 3. Important information can also be presented here.</p>
</div>
</div>.tabs {
.tabs__item-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: opacity 1s ease,transform 1s ease;
transform: translateY(0);
&.custom-content-class {
margin: 20px;
max-height: fit-content;
opacity: 1;
transform: translateY(-10px);
}
}
.tabs__button {
&.custom-button-class {
background-color: #0056b3;
transition: background-color 1s ease-out;
}
}
}<script type="module">
import { tabs } from "wskit";
tabs.run();
</script>Tab 1 Content
This is the content for Tab 1. You can place any information here.
Tab 2 Content
This is the content for Tab 2. You can use it for additional information.
Tab 3 Content
This is the content for Tab 3. Important information can also be presented here.