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 >
< link rel = "stylesheet" href="
< link rel = "stylesheet"
href = "jquery.mobile.collapsible.css" >
< script src =
</ script >
< script src = "example/latest.js" ></ script >
</ head >
< body >
< div data-role = "page" >
< div data-role = "header" >
< h2 >
Collapsible Tabs using CSS
and JavaScript
</ h2 >
</ div >
< div data-role = "content" >
< div data-role = "collapsible-set"
data-type = "tabs" data-tabs = "4"
data-theme = "a" data-content-theme = "a" >
< 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
Share your thoughts in the comments
Please Login to comment...