Skip to content

Instantly share code, notes, and snippets.

@primaryobjects

primaryobjects/collapsible.png

Last active April 22, 2022 22:35
Show Gist options
  • Save primaryobjects/0be99dc272858aba416677741e0f395b to your computer and use it in GitHub Desktop.
Save primaryobjects/0be99dc272858aba416677741e0f395b to your computer and use it in GitHub Desktop.
Download ZIP
Collapsible tabs example in Bootstrap 4 alpha. Resize the page to see the tabs collapse into a dropdown menu. See demo https://plnkr.co/edit/6WVKhJcqfRNP6pDoq85N?p=preview
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collapsible Tabs Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class='container main-tab'>
<h2>Collapsible Tabs</h2>
<p>Resize the page to see the tabs collapse into a dropdown menu.</p>
<ul class='nav nav-pills'>
<li class='nav-item border'>
<a href='#tab1' class='nav-link active' data-toggle='tab'>Tab 1</a>
</li>
<li class='nav-item border'>
<a href='#tab2' class='nav-link' data-toggle='tab'>Tab 2</a>
</li>
<li class='nav-item border'>
<a href='#tab3' class='nav-link' data-toggle='tab'>Tab 3</a>
</li>
<li class='nav-item border'>
<a href='#tab4' class='nav-link' data-toggle='tab'>Tab 4</a>
</li>
<li class='nav-item border'>
<a href='#tab5' class='nav-link' data-toggle='tab'>Tab 5</a>
</li>
<li class='nav-item border'>
<a href='#tab6' class='nav-link' data-toggle='tab'>Tab 6</a>
</li>
<li class='nav-item border'>
<a href='#tab7' class='nav-link' data-toggle='tab'>Tab 7</a>
</li>
<li class='nav-item border'>
<a href='#tab8' class='nav-link' data-toggle='tab'>Tab 8</a>
</li>
<li class='nav-item border'>
<a href='#tab9' class='nav-link' data-toggle='tab'>Tab 9</a>
</li>
<li class='nav-item border'>
<a href='#tab10' class='nav-link' data-toggle='tab'>Tab 10</a>
</li>
<li class='nav-item dropdown collapsed-menu'>
<a class="nav-link dropdown-toggle" data-toggle='dropdown' href='#' role='button' aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<div class="dropdown-menu collapsed-tabs" aria-labelledby="dropdownMenuButton">
</div>
</li>
</ul>
<div class='tab-content clearfix pt-3'>
<div class='tab-pane active' id='tab1'>
Tab 1
</div>
<div class='tab-pane' id='tab2'>
Tab 2
</div>
<div class='tab-pane' id='tab3'>
Tab 3
</div>
<div class='tab-pane' id='tab4'>
Tab 4
</div>
<div class='tab-pane' id='tab5'>
Tab 5
</div>
<div class='tab-pane' id='tab6'>
Tab 6
</div>
<div class='tab-pane' id='tab7'>
Tab 7
</div>
<div class='tab-pane' id='tab8'>
Tab 8
</div>
<div class='tab-pane' id='tab9'>
Tab 9
</div>
<div class='tab-pane' id='tab10'>
Tab 10
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var TabManager = {
initialize: function(parent) {
var tabs = parent;
var tabsHeight = tabs.innerHeight();
if (tabsHeight >= 50) {
while(tabsHeight > 50) {
var children = tabs.children('li:not(:last-child)');
var count = children.length;
// Create the new menu item.
var item = $(children[count-1]);
var newMenuItem = '<a class="dropdown-item" href="' + item.children('a').attr('href') + '" data-toggle="tab">' + item.text() + '</a>';
// Append the new menu item to the collapsed menu list.
tabs.find('.collapsed-tabs').prepend(newMenuItem);
// Remove the menu item from the main tab area.
item.remove();
tabsHeight = tabs.innerHeight();
}
}
else {
var count = 0;
while(tabsHeight < 50 && (tabs.children('li').length > 0) && count++ < 20) {
var collapsed = tabs.find('.collapsed-tabs').children('a');
var count = collapsed.length;
if (count) {
// Create the new tab item.
var item = $(collapsed[0]);
var newMenuItem = "<li class='nav-item'>\n<a href='" + item.attr('href') + "' class='nav-link' data-toggle='tab'>" + item.text() + "</a>\n</li>";
// Insert the new tab item into the main tab area.
tabs.children('li.collapsed-menu').before(newMenuItem);
// Remove the tab item from the collapsed menu list.
item.remove();
tabsHeight = tabs.innerHeight();
}
else {
break;
}
}
if (tabsHeight > 50) {
// Double chk height again.
TabManager.initialize(parent);
}
}
// Hide the collapsed menu list if no items are present.
if (!tabs.find('.collapsed-tabs').children('a').length) {
tabs.find('.collapsed-menu').hide();
}
else {
tabs.find('.collapsed-menu').show();
}
}
};
$(function() {
TabManager.initialize($('.main-tab .nav'));
$(window).resize(function() {
TabManager.initialize($('.main-tab .nav'))
});
})
@paschaldev
Copy link

Copyright????

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment