How to design tabview for mobiles using the tabview jQuery plugin ?

Last Updated : 03 Nov, 2020

In this article, we will learn how to design tabs for mobiles using the jQuery tabview plugin which is a jQuery-based plugin.

The following steps have to be followed to use the plugin:

Step 1: Download all the required pre-compiled files from the official Github and save it in your working folder.

Step 2: Create a new HTML file and import the files that would be used to make the plugin work. The main script file would be present in the latest directory of the repository.

Step 3: Define the header, the content, the number of tabs, and the theme of the tabs using the data-role attribute to define the various parts of the website as shown below:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Include the jQuery Mobile CSS -->
    <link rel="stylesheet" href=" 
http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 
  
    <!-- Include the tabview  
        mobile-collapsible CSS stylesheet -->
    <link rel="stylesheet" 
href="jquery.mobile.collapsible.css"> 
  
    <!-- Include jQuery -->
    <script src= 
        "http://code.jquery.com/jquery-1.10.1.js"> 
    </script> 
  
    <!-- Include the tabview script file -->
    <script src="example/latest.js"></script> 
</head> 
  
<body> 
    <!-- Define a page -->
    <div data-role="page"> 
  
        <!-- Define a header -->
        <div data-role="header"> 
            <h2> 
                Collapsible Tabs using CSS 
                and JavaScript 
            </h2> 
        </div> 
  
        <!-- Define the contert of the page -->
        <div data-role="content"> 
  
            <!-- Use a collapsible-set for 
             defining the tabs -->
            <div data-role="collapsible-set" 
                data-type="tabs" data-tabs="4" 
                data-theme="a" data-content-theme="a"> 
  
                <!-- Define each of the tabs  
                    for the plugin -->
                <div data-role="collapsible" 
                    data-collapsed="true"> 
                    <h1>Dhaka</h1> 
  
                    <p> 
                        Dhaka is the capital  
                        of Bangladesh 
                    </p> 
                </div> 
  
                <div data-role="collapsible"> 
                    <h1>Kabul</h1> 
  
                    <p> 
                        Kabul is the capital  
                        of Afganishtan 
                    </p> 
                </div> 
  
                <div data-role="collapsible"> 
                    <h1>Islamabad</h1> 
  
                    <p> 
                        Islamabad is the capital  
                        of Pakistan 
                    </p> 
                </div> 
  
                <div data-role="collapsible"> 
                    <h1>Washington</h1> 
  
                    <p> 
                        Washigton is the capital  
                        city of USA 
                    </p> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 