i added data-toggle="collapse" link in nav side bar , , when link clicked > should change v ,when tab clicked should change > looks collapse functionality not working . in css have code change icons , can pint out issue here in advance
below code snippet :-
<body> <div class="container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <nav class="nav-sidebar"> <ul class="nav tabs"> <li class="active"><a href="#tab1" data-toggle="tab" data-toggle="collapse" data-target="#tab1">tab1</a></li> <li class=""><a href="#tab2" data-toggle="tab" data-toggle="collapse" data-target="#tab2"> tab2</a></li> <li class=""><a href="#tab3" data-toggle="tab" data-toggle="collapse" data-target="#tab3"> tab3</a></li> </ul> </nav> </div> <!-- tab content --> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content"> <div class="tab-pane active text-style collapse in" id="tab1"> <p> tab1 content </p> </div> <div class="tab-pane text-style collapse" id="tab2"> <p> tab2 content </p> </div> <div class="tab-pane text-style collapse" id="tab3"> <p> tab3 content </p> </div> </div> </div> </body> in css file
.nav-sidebar a:after { font-family: 'glyphicons halflings'; content: "\e114"; float: right; color: grey; } .nav-sidebar a.collapsed:after { content: "\e080"; }
a couple of things here. don't need use collapse using bootstrap's tabs can scratch collapse. don't need put data-target , data-toggle in href's bootstraps tabs take care of need use data-toggle="tab" , toggle tab href value. can remove collapse class tab panes well. being said bootstap change active class of li when click on link can change after content there. so:
here fiddle showing changes fiddle
revised html:
<ul class="nav tabs"> <li class="active"><a data-toggle="tab" href="#tab1">tab 1</a></li> <li><a data-toggle="tab" href="#tab2">tab 2</a></li> <li><a data-toggle="tab" href="#tab3">tab 3</a></li> </ul> </nav> </div> <!-- tab content --> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content"> <div class="tab-pane fade active in" id="tab1"> <p> tab1 content </p> </div> <div class="tab-pane fade" id="tab2"> <p> tab2 content </p> </div> <div class="tab-pane fade" id="tab3"> <p> tab3 content </p> </div> </div> </div> revised css:
.nav-sidebar a:after{ content: "\e114"; font-family: 'glyphicons halflings'; color: grey; float: right; } .nav-sidebar li.active a:after{ content: "\e080"; } 
Comments
Post a Comment