How to make mobile resposive tabs
Tab panels are the most commonly used jQuery component to display categorized data on web applications. Tab panels work fine on desktop but most of us face issue with the responsiveness for mobiles or any of the handheld devices, if we have more tabs.
Here we have a solution for this, we can have mobile responsive tabs for tab panels that can be used easily for both the desktop and mobile.
By making use of Horizon Swiper jQuery plugin, we can have responsive tabs for tab panels
Here you can download the plugin from Github https://github.com/sebsauer90/horizon-swiper
After downloading the package you will have both the CSS an JS file in "dist" folder, which needs to be included on the webpage. Find reference below:
Following files will be available inside the "dist" folder
We'll use only horizon-swiper.min.css for CSS stylesheet and horizon-swiper.min.js for it's functioning. Please find code example how to make it's use.
Linking of required resources
<!--Linking the stylesheet for tabs--> <link href="/file_path/horizon-swiper.min.css" rel="stylesheet" /> <!--Linking the script filr for tabs functioning--> <scrip src="/file_path/horizon-swiper.min.js"></script>
Basic html markup which is required to create the tabs
<div class="horizon-swiper"> <div class="horizon-item"></div> <div class="horizon-item"></div> <div class="horizon-item"></div> </div>
Calling of the responsive tabs functionality
jQuery required to be included before the plugin.