Vertical Tab Component

Developer
Christian Fleschhut
Size
3,878 Kb
Views
36,432
  1. Vertical Tab Component Previews
  2. Vertical Tab Component HTML Codes
  3. Vertical Tab Component CSS Codes
  4. Vertical Tab Component JS Codes

How do I make an vertical tab component?

What is a vertical tab component? How do you make a vertical tab component? This script and codes were developed by Christian Fleschhut on 11 August 2022, Thursday.

Vertical Tab Component Previews
IQ Test

Vertical Tab Component - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical Tab Component</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='tabs'> <nav class='tabs__nav' role='nav'> <ul class='tabs__nav--list'> <li> <a class='tabs__nav--link' href='#tab-item-1'> Option 1 </a> </li> <li> <a class='tabs__nav--link' href='#tab-item-2'> Option 2 </a> </li> <li> <a class='tabs__nav--link' href='#tab-item-3'> Option 3 </a> </li> </ul> </nav> <article class='tabs__wrapper' role='main'> <div class='tabs__item' id='tab-item-1'> <h2> Heading 1 </h2> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend. </p> </div> <div class='tabs__item' id='tab-item-2'> <h2> Heading 2 </h2> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend. </p> </div> <div class='tabs__item' id='tab-item-3'> <h2> Heading 3 </h2> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend. </p> </div> </article>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vertical Tab Component - Script Codes CSS Codes

.tabs { display: table; width: 100%;
}
.tabs__nav,
.tabs__wrapper { display: table-cell; vertical-align: top;
}
.tabs__nav { width: 30%; background: #f2f2f2;
}
.tabs__nav--list { margin: 0; padding: 0; list-style: none;
}
.tabs__nav--link { display: block; margin: 0 0 1px; padding: 10px 15px; color: #999; background: #e6e6e6; text-decoration: none;
}
.tabs__nav--link:hover, .is-active .tabs__nav--link { color: #333; background: #cccccc;
}
.tabs__wrapper { width: 70%; padding: 0 20px;
}

Vertical Tab Component - Script Codes JS Codes

(function() { $.fn.tabify = function(options) { return this.each(function(i, el) { var defaults, hideAllTabs, highlightActiveLink, settings, showCurrentTab; defaults = { container: $(this), tabsItems: $(this).find('.tabs__item') }; settings = $.extend(defaults, options); showCurrentTab = function(ev) { var href, tab; ev.preventDefault(); href = $(this).attr('href'); tab = $(href); highlightActiveLink(this); hideAllTabs(); return tab.show(); }; hideAllTabs = function() { return settings.tabsItems.hide(); }; highlightActiveLink = function(link) { var listItems; link = $(link); listItems = link.parent().siblings(); listItems.removeClass('is-active'); return link.parent().addClass('is-active'); }; settings.container.on('click.tabify', '> nav a', showCurrentTab); return settings.container.find('nav a:first').trigger('click'); }); }; $(function() { return $('.tabs').tabify(); });
}).call(this);
Vertical Tab Component - Script Codes
Vertical Tab Component - Script Codes
Home Page Home
Developer Christian Fleschhut
Username cfleschhut
Uploaded August 11, 2022
Rating 3
Size 3,878 Kb
Views 36,432
Do you need developer help for Vertical Tab Component?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian Fleschhut (cfleschhut) Script Codes
Name
Givie.io Logo in CSS
React-Bootstrap sandbox
CodeSchool Powering Up with React
Hello Backbone.js
AngularJS comments form
Processing.js Playground
Json data for todolist
Sass random fn
Backbone.js Playground
Starting out with Ember.JS
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!