CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shreyas Rastogi
Shreyas Rastogi

Reputation: 19

collapse not working in siderbar

i added a data-toggle="collapse" to a link in nav side bar , and when link is clicked > should change to v ,when another tab is clicked it should change to > but looks like collapse functionality is not working . in CSS i have the code to change icons , Can someone pint out the issue here Thanks in advance

Below is the 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> This is Tab1 content </p>
      </div>
      <div class="tab-pane text-style collapse" id="tab2">
        <p> This is Tab2 content </p>
      </div>
      <div class="tab-pane text-style collapse" id="tab3">
        <p> This is 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";
}

Upvotes: 1

Views: 97

Answers (1)

Steve K
Steve K

Reputation: 9065

A couple of things here. You don't need to use the collapse with this as you are using bootstrap's tabs so you can scratch the collapse. So you don't need to put the data-target and data-toggle in the href's as bootstraps tabs will take care of this you just need to use data-toggle="tab" and it will toggle the tab by the href value. Then you can remove the collapse class from your tab panes as well. That being said bootstap will change the active class of the li when you click on the link so you can change your after content from there. So it will look like so:

Here is a fiddle showing you the 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> This is Tab1 content  </p>
</div>
<div class="tab-pane fade" id="tab2">
<p> This is Tab2 content  </p>    
</div>
<div class="tab-pane fade" id="tab3">
<p> This is 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";
}

Upvotes: 1

Related Questions