Posted By admin
Tags: ,
Simple Vertical Tab
Demo

How to implement in dynamic….? i am unable to do i created 2 modals pops in first i modal i dont have any issues all the tab work perfectly and when i click 2 modal the tabs of second modal shows null..,when i try to work with more than one tab. just the first one works. i tried to gave id to all but still not working. is there any adea,Good, make few changes to make it work still well:,remove <center> and have this in css:, div.bhoechie-tab-content { background-color: #ffffff; padding-left: 20px; padding-top: 10px; text-align: center; vertical-align: middle; },Add to text and make it look good in mobile (responsive)<span class=”hidden-xs”>Flight</span><span class=”hidden-xs”>Train</span>and so on…[email protected] (max-device-width : 480px) { h1.glyphicon { font-size: 1em; } span.hidden-xs { display: none; } },when page refreshed, it always make active first tab, any solution?,Thank you sir for knowledge… Really apriciated and inspired,god damn you! its not working and no files here. dont share half things bastard,Try to use Bootstrap 3.1.0 and download the http://netdna.bootstrapcdn…. and http://code.jquery.com/jque…, instead of using … also, the higher version of Bootstrap worked as well – when you click each tab – the javascript is actual the one that does that. Try the below header <head> <link href=”http://netdna.bootstrapcdn….” rel=”stylesheet” id=”bootstrap-css”> <script src=”http://code.jquery.com/jque…” type=”text/javascript”></script> <script type=”text/javascript”> $(document).ready(function () { $(“div.bhoechie-tab-menu>div.list-group>a”).click(function (e) { e.preventDefault(); $(this).siblings(‘a.active’).removeClass(“active”); $(this).addClass(“active”); var index = $(this).index(); $(“div.bhoechie-tab>div.bhoechie-tab-content”).removeClass(“active”); $(“div.bhoechie-tab>div.bhoechie-tab-content”).eq(index).addClass(“active”); }); }); </script></head>,Then add all other divs, note, it is slow when you access the direct url, I downloaded it and added it to my source code and referencesomething like this: <script src=”~/Scripts/jquery-latest.min.js”></script> <script type=”text/javascript”> $(document).ready(function () { $(“div.bhoechie-tab-menu>div.list-group>a”).click(function (e) { e.preventDefault(); $(this).siblings(‘a.active’).removeClass(“active”); $(this).addClass(“active”); var index = $(this).index(); $(“div.bhoechie-tab>div.bhoechie-tab-content”).removeClass(“active”); $(“div.bhoechie-tab>div.bhoechie-tab-content”).eq(index).addClass(“active”); }); }); </script> <style> /* bhoechie tab */div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; margin-left: 50px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97);}div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0;}div.bhoechie-tab-menu div.list-group{ margin-bottom: 0;}div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0;}div.bhoechie-tab-menu div.list-group>a .glyphicon,div.bhoechie-tab-menu div.list-group>a .fa { color: #5A55A3;}div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0;}div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0;}div.bhoechie-tab-menu div.list-group>a.active,div.bhoechie-tab-menu div.list-group>a.active .glyphicon,div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #5A55A3; background-image: #5A55A3; color: #ffffff;}div.bhoechie-tab-menu div.list-group>a.active:after{ content: ”; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #5A55A3;},div.bhoechie-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 2px; padding-top: 0px;},div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none;}</style><div class=”container”> <div class=”row”> <div class=”col-lg-5 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container”> <div class=”col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu”> <div class=”list-group”> <h4 class=”glyphicon glyphicon-plane”></h4>Phone <h4 class=”glyphicon glyphicon-road”></h4>TV <h4 class=”glyphicon glyphicon-home”></h4>Watch <h4 class=”glyphicon glyphicon-cutlery”></h4>Teddy <h4 class=”glyphicon glyphicon-credit-card”></h4>Email <h4 class=”glyphicon glyphicon-credit-card”></h4>Car </div> </div> <div class=”col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab”>, <div class=”bhoechie-tab-content active”> <center> <h1 class=”glyphicon glyphicon-plane” style=”font-size:14em;color:#55518a”></h1> <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2> <h3 style=”margin-top: 0;color:#55518a”>Flight Reservation</h3> </center> </div>, <div class=”bhoechie-tab-content”> <center> <h1 class=”glyphicon glyphicon-road” style=”font-size:12em;color:#55518a”></h1> <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2> <h3 style=”margin-top: 0;color:#55518a”>Train Reservation</h3> </center> </div>, <div class=”bhoechie-tab-content”> <center> <h1 class=”glyphicon glyphicon-home” style=”font-size:12em;color:#55518a”></h1> <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2> <h3 style=”margin-top: 0;color:#55518a”>Hotel Directory</h3> </center> </div> <div class=”bhoechie-tab-content”> <center> <h1 class=”glyphicon glyphicon-cutlery” style=”font-size:12em;color:#55518a”></h1> <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2> <h3 style=”margin-top: 0;color:#55518a”>Restaurant Diirectory</h3> </center> </div> <div class=”bhoechie-tab-content”> <center> <h1 class=”glyphicon glyphicon-credit-card” style=”font-size:12em;color:#55518a”></h1> <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2> <h3 style=”margin-top: 0;color:#55518a”>Credit Card</h3> </center> </div>, <div class=”bhoechie-tab-content”> <center> <h1 class=”glyphicon glyphicon-credit-card” style=”font-size:12em;color:#55518a”></h1> <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2> <h3 style=”margin-top: 0;color:#55518a”>Email</h3> </center> </div> </div> </div> </div></div>,Hmm, I noticed that when you post something here, the full url is reduced to … so, I want to try this <link href=”http : // netdna.bootstrapcdn.com / bootstrap / 3.1.0 / css / bootstrap.min.css” rel=”stylesheet” id=”bootstrap-css”> <script src=” http: // code.jquery.com / jquery-latest.min.js ” type=”text / javascript”></script>,I hope it won’t reduce it again, all you want to do is to remove space that I added to let the full url shows,i am not able to edit html and css code what is the problem?,I’m unable to implement multiple tabs in same page, Please help me….,I’m unable to use multiple tabs in same page, Please help me….,Thanks & Nice but 2 lines are missing(for resources ) Please add themmust add : <link href=”http://netdna.bootstrapcdn….” rel=”stylesheet” id=”bootstrap-css”><script src=”http://code.jquery.com/jque…” type=”text/javascript”></script>,The Full Working Code will be :,<head>, <link href=”http://netdna.bootstrapcdn….” rel=”stylesheet” id=”bootstrap-css”>,<script src=”http://code.jquery.com/jque…” type=”text/javascript”></script>,<script>,$(document).ready(function() {,//alert(“ready”);, $(“div.bhoechie-tab-menu>div.list-group>a”).click(function(e) {, e.preventDefault();, $(this).siblings(‘a.active’).removeClass(“active”);, $(this).addClass(“active”);, var index = $(this).index();, $(“div.bhoechie-tab>div.bhoechie-tab-content”).removeClass(“active”);, $(“div.bhoechie-tab>div.bhoechie-tab-content”).eq(index).addClass(“active”);, });,});,</script>,</head>,<style>,/* bhoechie tab */,div.bhoechie-tab-container{, z-index: 10;, background-color: #ffffff;, padding: 0 !important;, border-radius: 4px;, -moz-border-radius: 4px;, border:1px solid #ddd;, margin-top: 20px;, margin-left: 50px;, -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);, box-shadow: 0 6px 12px rgba(0,0,0,.175);, -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);, background-clip: padding-box;, opacity: 0.97;, filter: alpha(opacity=97);,},div.bhoechie-tab-menu{, padding-right: 0;, padding-left: 0;, padding-bottom: 0;,},div.bhoechie-tab-menu div.list-group{, margin-bottom: 0;,},div.bhoechie-tab-menu div.list-group>a{, margin-bottom: 0;,},div.bhoechie-tab-menu div.list-group>a .glyphicon,,div.bhoechie-tab-menu div.list-group>a .fa {, color: #5A55A3;,},div.bhoechie-tab-menu div.list-group>a:first-child{, border-top-right-radius: 0;, -moz-border-top-right-radius: 0;,},div.bhoechie-tab-menu div.list-group>a:last-child{, border-bottom-right-radius: 0;, -moz-border-bottom-right-radius: 0;,},div.bhoechie-tab-menu div.list-group>a.active,,div.bhoechie-tab-menu div.list-group>a.active .glyphicon,,div.bhoechie-tab-menu div.list-group>a.active .fa{, background-color: #5A55A3;, background-image: #5A55A3;, color: #ffffff;,},div.bhoechie-tab-menu div.list-group>a.active:after{, content: ”;, position: absolute;, left: 100%;, top: 50%;, margin-top: -13px;, border-left: 0;, border-bottom: 13px solid transparent;, border-top: 13px solid transparent;, border-left: 10px solid #5A55A3;,},div.bhoechie-tab-content{, background-color: #ffffff;, /* border: 1px solid #eeeeee; */, padding-left: 20px;, padding-top: 10px;,},div.bhoechie-tab div.bhoechie-tab-content:not(.active){, display: none;,},</style>,<body>,<div class=”container”>,<div class=”row”>, <div class=”col-lg-5 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container”>, <div class=”col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu”>, <div class=”list-group”>, <h4 class=”glyphicon glyphicon-plane”></h4>Flight , <h4 class=”glyphicon glyphicon-road”></h4>Train , <h4 class=”glyphicon glyphicon-home”></h4>Hotel , <h4 class=”glyphicon glyphicon-cutlery”></h4>Restaurant , <h4 class=”glyphicon glyphicon-credit-card”></h4>Credit Card , </div>, </div>, <div class=”col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab”>, <div class=”bhoechie-tab-content active”>, <center>, <h1 class=”glyphicon glyphicon-plane” style=”font-size:14em;color:#55518a”></h1>, <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2>, <h3 style=”margin-top: 0;color:#55518a”>Flight Reservation</h3>, </center>, </div>, <div class=”bhoechie-tab-content”>, <center>, <h1 class=”glyphicon glyphicon-road” style=”font-size:12em;color:#55518a”></h1>, <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2>, <h3 style=”margin-top: 0;color:#55518a”>Train Reservation</h3>, </center>, </div>, <div class=”bhoechie-tab-content”>, <center>, <h1 class=”glyphicon glyphicon-home” style=”font-size:12em;color:#55518a”></h1>, <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2>, <h3 style=”margin-top: 0;color:#55518a”>Hotel Directory</h3>, </center>, </div>, <div class=”bhoechie-tab-content”>, <center>, <h1 class=”glyphicon glyphicon-cutlery” style=”font-size:12em;color:#55518a”></h1>, <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2>, <h3 style=”margin-top: 0;color:#55518a”>Restaurant Diirectory</h3>, </center>, </div>, <div class=”bhoechie-tab-content”>, <center>, <h1 class=”glyphicon glyphicon-credit-card” style=”font-size:12em;color:#55518a”></h1>, <h2 style=”margin-top: 0;color:#55518a”>Cooming Soon</h2>, <h3 style=”margin-top: 0;color:#55518a”>Credit Card</h3>, </center>, </div>, </div>, </div>, </div>,</div>,</body>,very good, but is not completely responsive,good,I am not able to implement this in WordPress dynamic, can you send me a code snipet or an idea of how to do it.,How can I change the size of listgroup without declaring a fixed size?,Add to end focus cleaner for FF:,.focus(function () {this.blur();});,It’s not working in IE 8. It shows all right hand side tab details under single tab,it doesn’t work in chrome using Bootstrap 3.2.0,it does’nt work in chrome using Bootstrap 3.2.0.,Fix for IE8: use “width:100%;” on .tab-container,not work for me.still It shows all right hand side tab details under single tab,NOt responsive 🙁 for xs,media queries,Love the idea, but unfortunately, this doesn’t have much to do with Bootstrap. It only uses the list-group component.,I was also unable to get it work in Chrome using Bootstrap 3.2.0.,do you fix it ?,Very Nice ! But i am facing a problem about any event. when i click a button with b tab, its start with a tab.,Thank you so much.,It’s not working in IE 8. It shows all right hand side tab details under single tab.,Do You fix it?,how do i make it work…? i get a really wide broken version. i placed the script in the script section and the css in all three of my section. please help,can you make the tabs more responsive? and with large screens a little bit more width? if you get under a width of 528px your navigation-tabs collapse with the content on the right side and some things like that… but the principe is nice and looks awesome!,Amazing! Thank you so much.,Awesome!,Nice.,Very Nice!,The author is Septian-Bhoechie

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *