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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
