Here are some responsive jQuery tabs that are perfect for displaying website related content.
A Pen by Jonathan Clift on CodePen.
Created
December 13, 2018 18:34
-
-
Save scoaband/bf8f3ffdc01f24f5480e7997b10fa827 to your computer and use it in GitHub Desktop.
Responsive jQuery tabs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css"/> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
| <div id="wrapper"> | |
| <section id="generic-tabs"> | |
| <h1 class="callout">Reponsive jQuery tabs</h1> | |
| <ul id="tabs"> | |
| <li> | |
| <a title="Home" href="#first-tab"><i class="fa fa-home"></i> Home</a> | |
| </li> | |
| <li> | |
| <a title="Photos" href="#second-tab"><i class="fa fa-picture-o"></i> Photos</a> | |
| </li> | |
| <li> | |
| <a title="About" href="#third-tab"><i class="fa fa-info-circle"></i> About</a> | |
| </li> | |
| <li> | |
| <a title="Contact" href="#fourth-tab"><i class="fa fa-envelope"></i> Contact</a> | |
| </li> | |
| </ul> | |
| <div id="first-tab" class="tab-content"> | |
| <h1>Home</h1> | |
| <p><strong>Hey there, <a href="https://cliftwalker.co.uk">Jonathan Clift</a> here! I created these tabs as I find myself recreating this tab style over and over again. Use them as you please and let me know what you think.</strong></p> | |
| <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> | |
| </div> | |
| <div id="second-tab" class="tab-content"> | |
| <h1>Twitter office photo!</h1> | |
| <a href="https://www.flickr.com/photos/twitteroffice/15437700946" title="Twitter Boston by Twitter, on Flickr"><img src="https://farm3.staticflickr.com/2948/15437700946_3dec413dd2_b.jpg" alt="Twitter Boston"></a> | |
| <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> | |
| </div> | |
| <div id="third-tab" class="tab-content"> | |
| <h1>About</h1> | |
| <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> | |
| </div> | |
| <div id="fourth-tab" class="tab-content"> | |
| <h1>Contact</h1> | |
| <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> | |
| </div> | |
| </section> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($){ | |
| /* trigger when page is ready */ | |
| $(document).ready(function (){ | |
| //Tabs functionality | |
| //Firstly hide all content divs | |
| $('#generic-tabs div').hide(); | |
| //Then show the first content div | |
| $('#generic-tabs div:first').show(); | |
| //Add active class to the first tab link | |
| $('#generic-tabs ul#tabs li:first').addClass('active'); | |
| //Functionality when a tab is clicked | |
| $('#generic-tabs ul#tabs li a').click(function(){ | |
| //Firstly remove the current active class | |
| $('#generic-tabs ul#tabs li').removeClass('active'); | |
| //Apply active class to the parent(li) of the link tag | |
| $(this).parent().addClass('active'); | |
| //Set currentTab to this link | |
| var currentTab = $(this).attr('href'); | |
| //Hide away all tabs | |
| $('#generic-tabs div').hide(); | |
| //show the current tab | |
| $(currentTab).show(); | |
| //Stop default link action from happening | |
| return false; | |
| }); | |
| }); | |
| })(window.jQuery); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{font: 67.5% Helvetica, Arial, Sans-serif; background:#2c3e50;} | |
| /*Box sizing stuff*/ | |
| * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} | |
| /*Font styels*/ | |
| h1 {font-weight: normal; font-size:1.6em;} | |
| h1.callout{color:#FFFFFF; font-size:2em; margin:1em 0;} | |
| p{font-size: 1.2em; color:#a3a3a3 ; line-height: 1.5;} | |
| p strong{color:#555555;} | |
| p a{color:#27ae60; text-decoration:none;} | |
| /*img stuff*/ | |
| img {max-width: 100%;} | |
| /*Generic styles*/ | |
| #wrapper{ max-width: 800px; width:100%; margin:0 auto;} | |
| #generic-tabs{ width:100%; padding:20px;} | |
| /*Tab styles*/ | |
| #generic-tabs ul { overflow: hidden; margin:0; padding:0;} | |
| #generic-tabs ul li{ float:left; display:inline-block; width:25%; background:#EDEDED; border-top:4px solid #CCCCCC; border-right:1px solid #CCCCCC;} | |
| #generic-tabs ul li:last-child {border-right:none;} | |
| #generic-tabs ul li:first-child { padding-left:0; } | |
| /*Tab link styles*/ | |
| #generic-tabs ul li a {text-align:center; display:block; font-size: 1.2em; text-decoration: none; padding: 1.2em 1em; line-height: 16px; color:#BBBBBB;} | |
| /*Active tab styles*/ | |
| #generic-tabs ul li.active {background:#FFFFFF; border-top:4px solid #27ae60;} | |
| #generic-tabs ul li.active a { color:#333333;} | |
| #generic-tabs ul li.active a i {color:#27ae60;} | |
| /*Tab content styles*/ | |
| #generic-tabs .tab-content{ background:#FFFFFF; padding:3em 2em;} | |
| #generic-tabs .tab-content h1 {margin-top:0;} | |
| @media only screen and (min-width: 650px) { | |
| h1{font-size:2em;} | |
| h1.callout{font-size:3em;} | |
| p{font-size:1.4em;} | |
| #generic-tabs ul li a { font-size:1.6em; padding: 1.2em 2em; line-height: 16px; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment