Bootstrap snippet: Responsive tabs with accordion style in mobile devices

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'] });
srinutest

Responsive tabs with accordion style in mobile devices

srinutest
  Apr 22nd, 08:00
1.5K Views