Bootstrap framework snippet Responsive tabs with accordion style in mobile devices

This bootstrap framework snippet "Responsive tabs with accordion style in mobile devices" was designed to help people of all skill levels - designer or developer,
huge nerd or early beginner. copy and paste the code. Use it as a complete kit or use it to start something more complex.


<div class="col-sm-6"> <ul class="nav nav-tabs responsive-tabs"> <li class="active"><a href="#home1">Home</a></li> <li><a href="#profile1">Profile</a></li> <li><a href="#messages1">Messages</a></li> <li><a href="#settings1">Settings</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home1"> <p>Home Content ....</p> </div> <div class="tab-pane" id="profile1"> <p>Profile Content ....</p> </div> <div class="tab-pane" id="messages1"> <p>Messages Content .....</p> </div> <div class="tab-pane" id="settings1"> <p>Settings Content ....</p> </div> </div> </div>
body{margin-top:20px;} .responsive-tabs { margin-top:20px; } .responsive-tabs-container .tab-content { padding:10px 20px; border:1px solid #ddd; border-top:none; } .responsive-tabs-container[class*="accordion-"] .tab-pane { margin-bottom: 15px; } .responsive-tabs-container[class*="accordion-"] .accordion-link { display: none; margin-bottom: 10px; padding: 10px 15px; background-color: #f5f5f5; border-radius: 3px; border: 1px solid #ddd; color: #333; } .responsive-tabs-container[class*="accordion-"] .accordion-link.active { border-bottom: medium none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #ff6600; } @media (max-width: 767px) { .responsive-tabs-container.accordion-xs .nav-tabs { display: none; } .responsive-tabs-container.accordion-xs .accordion-link { display: block; } .responsive-tabs-container[class*="accordion-"] .tab-pane { border:1px solid #ddd; border-top:none; border-top-left-radius: 0; border-top-right-radius: 0; border-width: medium 1px 1px; margin-bottom: 10px; margin-top: -10px; padding: 10px 10px 0; } } @media (min-width: 768px) and (max-width: 991px) { .responsive-tabs-container.accordion-sm .nav-tabs { display: none; } .responsive-tabs-container.accordion-sm .accordion-link { display: block; } .responsive-tabs-container[class*="accordion-"] .tab-pane { border:1px solid #ddd; border-top:none; border-top-left-radius: 0; border-top-right-radius: 0; border-width: medium 1px 1px; margin-bottom: 10px; margin-top: -10px; padding: 10px 10px 0; } } @media (min-width: 992px) and (max-width: 1199px) { .responsive-tabs-container.accordion-md .nav-tabs { display: none; } .responsive-tabs-container.accordion-md .accordion-link { display: block; } } @media (min-width: 1200px) { .responsive-tabs-container.accordion-lg .nav-tabs { display: none; } .responsive-tabs-container.accordion-lg .accordion-link { display: block; } }
! function($) { "use strict"; var a = { accordionOn: ["xs"] }; $.fn.responsiveTabs = function(e) { var t = $.extend({}, a, e), s = ""; return $.each(t.accordionOn, function(a, e) { s += " accordion-" + e }), this.each(function() { var a = $(this), e = a.find("> li > a"), t = $(e.first().attr("href")).parent(".tab-content"), i = t.children(".tab-pane"); a.add(t).wrapAll('<div class="responsive-tabs-container" />'); var n = a.parent(".responsive-tabs-container"); n.addClass(s), e.each(function(a) { var t = $(this), s = t.attr("href"), i = "", n = "", r = ""; t.parent("li").hasClass("active") && (i = " active"), 0 === a && (n = " first"), a === e.length - 1 && (r = " last"), t.clone(!1).addClass("accordion-link" + i + n + r).insertBefore(s) }); var r = t.children(".accordion-link"); e.on("click", function(a) { a.preventDefault(); var e = $(this), s = e.parent("li"), n = s.siblings("li"), c = e.attr("href"), l = t.children('a[href="' + c + '"]'); s.hasClass("active") || (s.addClass("active"), n.removeClass("active"), i.removeClass("active"), $(c).addClass("active"), r.removeClass("active"), l.addClass("active")) }), r.on("click", function(t) { t.preventDefault(); var s = $(this), n = s.attr("href"), c = a.find('li > a[href="' + n + '"]').parent("li"); s.hasClass("active") || (r.removeClass("active"), s.addClass("active"), i.removeClass("active"), $(n).addClass("active"), e.parent("li").removeClass("active"), c.addClass("active")) }) }) } }(jQuery); $('.responsive-tabs').responsiveTabs({ accordionOn: ['xs', 'sm'] });

Creator of this snippet

Srinu Sirigiri

Bootstrap version: 3.3.6

Created: Apr 20th 2016, 06:34

Views: 3.2K