Framework7 Tabs

Framework7 Tabs are the set of logically grouped content that facilitates you to quickly move between them and save the space like accordion.

Tabs Layout

See the layout of a Framework7 tab:

<!-- Tabs wrapper, should have "tabs" class. It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

Here:

<div class = "tabs">: It is a required wrapper for all tabs. If we miss this, tabs will not work at all.
<div class = "tab">: It is a single tab, which should have unique id attribute.
<div class = "tab active">: It is a single active tab, which uses additional active class to make tab visible (active).

Switching Between Tabs

If you want that the user can switch between tabs, use some controller in tabs layout. For this, you should create links (<a> tags) with tab-link class and href attribute equal to the id attribute of target tab:

Switch Multiple Tabs

If you have single tab link and you want to switch between multiple tabs, use classes instead of using ID's and data-tab attribute.

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

The data-tab attribute of tab-link contains CSS selector of target tab/tabs.

There are different types of tabs used in Framework7:

Index	Tab Type	Description
1)	Inline Tabs	Inline tabs are sets of grouped in inline that allow you to quickly flip between them.
2)	Switch Tabs From Navbar	We can place tabs in navigation bar that facilitate you to flip between them.
3)	Switch Views From Tab Bar	Single tab can be used to switch between views with its own navigation and layout.
4)	Animated Tabs	You can use simple transition (animation) to switch tabs.
5)	Swipeable Tabs	You can create swipeable tabs with simple transition by using the tabs-swipeable-wrap class for the tabs.
6)	Tabs JavaScript Events	JavaScript events can be used when you are working with JavaScript code for the tabs.
7)	Show Tab Using JavaScript	You can switch or show the tab using JavaScript methods.