Tabs
Horizontal Tabs
- use a .tab-container class as wraper class for tabs.
- It should contain ul with .tabs class which will create the tab links. Each tab links data-tab attribute value should match the id of its tabs content. The tab content should be wrapped around a div with class .tab-content
- div with the class .current will be set as the default active tab
- Breakfast
- Lunch
- Dinner
This is the first tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one’s definition of your life; define yourself.
This is the second tab
Food qualities braise chicken cuts bowl through slices butternut snack. Tender meat juicy dinners. One-pot low heat plenty of time adobo fat raw soften fruit. sweet renders bone-in marrow richness kitchen, fricassee basted pork shoulder.
This is the third tab
Juicy meatballs brisket slammin' baked shoulder. Juicy smoker soy sauce burgers brisket. polenta mustard hunk greens. Crafting renders aromatic enjoyment, then slices taco. Minutes undisturbed cuisine lunch magnificent mustard curry. Juicy share baking sheet pork. Meals ramen rarities selection, raw pastries richness magnificent atmosphere.
<div class=" documentation">
<h1 class="title"> Tabs</h1>
<div class="info">
<section class="inline-el">
<h4 class="mb mt">Horizontal Tabs</h4>
<div class="tab-container">
<ul class="tabs">
<li class="current" data-tab="tab-1">Breakfast</li>
<li data-tab="tab-2">Lunch</li>
<li data-tab="tab-3">Dinner</li>
</ul>
<div id="tab-1" class="tab-content current">
<h2>This is the first tab</h2>
<p>...</p>
</div>
<div id="tab-2" class="tab-content">
<h2>This is the second tab</h2>
<p>...</p>
</div>
<div id="tab-3" class="tab-content">
<h2>This is the third tab</h2>
<p></p>
</div>
</div>
</section>
</div>
</div>
Vertical Tabs
- For vertical tabs use the .tab-container-vertical class as wraper class for tabs.
- It should contain ul with .tabs-vertical class which will create the tab links. Each tab links data-tab attribute value should match the id of its tabs content. The tab content should be wrapped around a div with class .tab-content-vertical
- div with the class .current-v will be set as the default active tab
- Breakfast
- Lunch
- Dinner
- Snacks
- Drinks
This is the first tab
Juicy meatballs brisket slammin' baked shoulder. Juicy smoker soy sauce burgers brisket. polenta mustard hunk greens.Crafting renders aromatic enjoyment, then slices taco. Minutes undisturbed cuisine lunch magnificent mustard curry. Juicy share baking sheet pork. Meals ramen rarities selection, raw pastries richness magnificent atmosphere.
This is the second tab
Crafting renders aromatic enjoyment, then slices taco. Minutes undisturbed cuisine lunch magnificent mustard curry. Juicy share baking sheet pork. Meals ramen rarities selection, raw pastries richness magnificent atmosphere.
This is the third tab
Juicy meatballs brisket slammin' baked shoulder. Juicy smoker soy sauce burgers brisket. polenta mustard hunk greens. Crafting renders aromatic enjoyment, then slices taco. Minutes undisturbed cuisine lunch magnificent mustard curry. Juicy share baking sheet pork. Meals ramen rarities selection, raw pastries richness magnificent atmosphere.
This is the fourth tab
Crafting renders aromatic enjoyment, then slices taco. Minutes undisturbed cuisine lunch magnificent mustard curry. Juicy share baking sheet pork. Meals ramen rarities selection, raw pastries richness magnificent atmosphere.
This is the fifth tab
Juicy meatballs brisket slammin' baked shoulder. Juicy smoker soy sauce burgers brisket. polenta mustard hunk greens. Crafting renders aromatic enjoyment, then slices taco. Minutes undisturbed cuisine lunch magnificent mustard curry. Juicy share baking sheet pork. Meals ramen rarities selection, raw pastries richness magnificent atmosphere.
HTML stucture:
<div class="tab-container-vertical">
<ul class="tabs-vertical">
<li class="current-v" data-tab="tabv-1">Breakfast</li>
<li data-tab="tabv-2">Lunch</li>
<li data-tab="tabv-3">Dinner</li>
<li data-tab="tabv-4">Snacks</li>
<li data-tab="tabv-5">Drinks</li>
</ul>
<div id="tabv-1" class="tab-content-vertical current-v clearfloat">
<h2>This is the first tab</h2>
<img src="images/watermelonMint.jpg" alt="water" class="floatRight-md img-responsive">
<p>Juicy meatballs brisket slamminmagnificent atmosphere. ... </p>
</div>
<div id="tabv-2" class="tab-content-vertical clearfloat">
<h2>This is the second tab</h2>
<img src="images/page-2_img02.jpg" alt="water" class="floatRight-md img-responsive">
<p>Crafting renders aromatic enjoymre ba. ..... </p>
</div>
<div id="tabv-3" class="tab-content-vertical clearfloat">
<h2>This is the third tab</h2>
<img src="images/watermelonMint.jpg" alt="water" class="floatRight-md img-responsive">
<p>Juicy meatballs brisket slammin' baked shoulder.... </p>
</div>
<div id="tabv-4" class="tab-content-vertical clearfloat">
<h2>This is the fourth tab</h2>
<img src="images/page-2_img02.jpg" alt="water" class="floatRight-md img-responsive">
<p>Crafting renders aromatic enjoyment, then slices taco.... </p>
</div>
</div>