Tabsy CSS
Simple tabs toggler component written in pure CSS with no dependencies
Install
With npm:
npm install tabsy-css
With Bower:
bower install tabsy-css
Usage
Include css:
<link href='tabsy.css' rel='stylesheet' type='text/css'>
Initial required structure, place any content you want within the tabs:
<div class="tabsy"> <input type="radio" id="tab1" name="tab" checked> <label class="tabButton" for="tab1">Tab One</label> <div class="tab"> <div class="content"> Content One </div> </div> <input type="radio" id="tab2" name="tab" checked> <label class="tabButton" for="tab2">Tab Two</label> <div class="tab"> <div class="content"> Content Two </div> </div> <input type="radio" id="tab3" name="tab" checked> <label class="tabButton" for="tab3">Tab Three</label> <div class="tab"> <div class="content"> Content Three </div> </div></div>
Demo
Demo available here.
Options
Default css settings are placed in library/_variables.scss
:
Note
Based on Flexbox feature. Where not supported simple fallback is applied.
License
Tabsy CSS is licensed under the MIT license.