wckd
THIS IS WCKD ™
   

Early Access

Tabs

Ceates tabs that can be cycled through automatically, with an optional change the speed, and pauses with mouseover.

Tabs Example

<div class="columns wckd-tabs accordion fill padded">
	<div class="column">
		<button class="tabs-toggle">One</button>
		<div class="tabs-content">
			<p>First Tab</p>
		</div>
	</div>
	<div class="column">
		<button class="tabs-toggle">Two</button>
		<div class="tabs-content">
			 <p>Second Tab</p>
		</div>
	</div>
	<div class="column">
		<button class="tabs-toggle">Three</button>
		<div class="tabs-content">
			<p>Third Tab</p>
		</div>
	</div>
</div>

First Tab

Second Tab

Third Tab

Vertical Tabs Example

<div class="columns wckd-tabs vertical fill padded">
	<div class="column">
		<button class="tabs-toggle">One</button>
		<div class="tabs-content">
			<p>First Tab</p>
		</div>
	</div>
	<div class="column">
		<button class="tabs-toggle">Two</button>
		<div class="tabs-content">
			 <p>Second Tab</p>
		</div>
	</div>
	<div class="column">
		<button class="tabs-toggle">Three</button>
		<div class="tabs-content">
			<p>Third Tab</p>
		</div>
	</div>
</div>

Bug: display:flex is automatically applied to the parent container for vertical tabs to function properly. However, if you want horizontal tabs on mobile, you will need to manually override this style by setting display: block for smaller screens.

First Tab

Second Tab

Third Tab

Tabs HTML Structure

  • section
    • ul.wckd-tabs-nav
      • li
        • button
    • div.columns.wckd-tabs
      • div.column
        • button.tabs-toggle
        • div.tabs-content

Tabs Options

vertical
add to .wckd-tabs to make tabs vertical
accordion
add to .wckd-tabs to display as accordion on mobile

updates

  • none