Skip to content
Related Articles

Related Articles

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="
  
    <!-- Include the tabview 
        mobile-collapsible CSS stylesheet -->
    <link rel="stylesheet" 
href="jquery.mobile.collapsible.css">
  
    <!-- Include jQuery -->
    <script src=
    </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>

Output: 

  • Using the plugin on a non-mobile view

  • Using the plugin on a mobile view

My Personal Notes arrow_drop_up
Recommended Articles
Page :