You have seen accordion tabs on website to show FAQ or other content. This is quite common and impressive way to show information on web page. Mostly accordion tabs used in FAQ pages, but you can use this feature anywhere like show single product details in tabs or write about your services in tabs, where ever you want to use.
There is plenty of jQuery plugin available on internet to get this feature, but instead to use of lot of lines of code or files, just try this easy responsive accordion tabs code. We have used simple HTML structure, CSS and jQuery code, so it keep very easy to implement for you.
How to Create Responsive Accordion Tabs
Lets start to learn how we can create this feature on our web page. First write down simple HTML structure code to show tabs and inner information. We are using unordered element to show horizontal accordion tabs. Main heading/title gone inside <h3> tag and inner content placed inside <p> tag.
HTML Structure:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="container"> <div align="center" style="padding:10px"><h1>Responsive Accordion Tabs</h1></div> <ul class="toggle"> <li> <h3>First Title</h3> <div class="panel"> <p>First inner information goes here</p> </div> </li> <li> <h3>Second Title</h3> <div class="panel"> <p>Secoond inner information goes here</p> </div> </li> <li> <h3>Third Title</h3> <div class="panel"> <p>Third inner information goes here</p> </div> </li> </ul> </div> |
Accordion jQuery Code:
First include the latest jQuery-min.js file in your document. We have used jQuery slideUp and slideDown event on toogle li click. This is very simple jQuery code, placed it inside your <head> element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { $('.toggle li').click(function () { $('div.panel').slideUp('400'); var text = $(this).children('div.panel'); if (text.is(':hidden')) { text.slideDown('400'); } else { text.slideUp('400'); } }); }); </script> |
Responsive Accordion Tabs CSS:
Now we need to use some CSS to make the responsive look of these accordion tabs. You can easily make changes on this CSS as per your website structure. We are used minimal CSS element to make this simple.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<style> .container { margin: 50px auto; padding: 10px; max-width: 650px; font-family: sans-serif; text-color:#4b4b4b; } .toggle { padding:0; list-style:none; border-bottom: 1px solid #d5d5d5; } .toggle li { position:relative; background: #f8f8f8; border-top:1px solid #e1e1e1; border-bottom: 0; border-left: 0; border-right: 0; cursor:pointer; } .toggle h3 { margin:0; padding: 14px; color: #4b4b4b; font-size: 20px; font-weight: normal; } .toggle .panel { display:none; position: relative; padding: 10px 43px 10px 10px; background: #fff; border-top:1px solid #d5d5d5; } .toggle .panel p { margin: 10px 0; line-height: 25px; } </style> |
Thats it, nothing complex to get this accordion tab feature on your web page. Let me know if you face any issue to implement on your web page. Check live demo and source code also available.
DEMO [sociallocker]Download[/sociallocker]
Good information and useful instructions they amazing. You did a great job on this topic, I have read your posts they amazing and very help us.Thanks for sharing this information.
ivf treatment in hyderabad