Menu
I have a collapsable element which contains tabs, where the collapsable element has an icon (icon-arrow-down) at the left side of the header text. When you collapse this element the icon changes to icon-arrow-up. It works great, but, when I change between tabs, the icon changes too.
Here is my jsFiddle: http://jsfiddle.net/m6R44/
<div class="well">
<h3>
<span class="icon-arrow-down" data-toggle="collapse" data-target="#collapseH" id="collapseP"></span>
<a href="#">Lorem Ipsum</a>
</h3>
<div id="collapseH" class="collapse in">
<ul class="nav nav-tabs" id="ic_tabs">
<li class="active"><a href="#paragraph1" data-toggle="tab">Paragraph 1</a></li>
<li><a href="#paragraph2" data-toggle="tab">Paragraph 2</a></li>
<li><a href="#paragraph3" data-toggle="tab">Paragraph 3</a></li>
</ul>
<div id="ic_tabsContent" class="tab-content">
<div class="tab-pane fade in active" id="paragraph1">
content 1
</div>
<div class="tab-pane fade" id="paragraph2">
content 2
</div>
<div class="tab-pane fade" id="paragraph3">
content 3
</div>
</div>
</div>
</div>
<script>
$('#collapseH').on('show hide', function(e){
$('#collapseP').toggleClass('icon-arrow-up icon-arrow-down', 200);
});
</script>
993
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
You can add the icon custom css class to the Accordion header using 'iconCss' property and also add css styles to the defined class. The accordion icon element is rendered before the header text in the DOM element.
How it works. The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
Bootstrap Twitter Icon refers to an American microblogging and social networking service. Twitter Icon is given below. You can use this icon on the same way in your project. First make sure you have added Bootstrap Icon library. If this library is added just add the HTML css class twitter to any element to add the icon.
Using only CSS, the bootstrap collapse icon can be changed with your predefined icons: In your HTML add aria-expanded="false" and add two icons what you need to set in your collapse bar. Like, And control it from css. When collapse bar expand then Run the snippet and I think you just need this...
The Bootstrap collapse plugin basically requires the two elements to work properly — the trigger element such as a button or hyperlink, and the collapsible element itself.
What is Glyphicons. Glyphicons are icon fonts which you can use in your web projects. Though you need commercial licensing for using Glyphicons, but you can use them with Twitter Bootstrap based projects for free.
Here is a CSS-only solution. Change your toggle to this:
<span class="arrow-toggle" data-toggle="collapse" data-target="#collapseH" id="collapseP">
<span class="icon-arrow-down"></span>
<span class="icon-arrow-up"></span>
</span>
Add this CSS to change the icon based on the collapsed state:
.arrow-toggle .icon-arrow-down,
.arrow-toggle.collapsed .icon-arrow-up {
display: inline-block;
}
.arrow-toggle.collapsed .icon-arrow-down,
.arrow-toggle .icon-arrow-up {
display: none;
}
Here is a jsFiddle example.
123
You need to change your selector from this:
$('#collapseH').on('show hide', function(e){
To this:
$('#collapseP').on('click', function(e){
Your #collapseH is wrap all the tabs HTML, so when you click one one of the tabs you also clicks on #collapseH. So i change the selector to be fire only when the users clicks on the arrow itself #collapseP.
Use this
$('#collapseP').on('click', function(e){
$('#collapseP').toggleClass('icon-arrow-down , icon-arrow-up', 200);
});
See Fiddle example
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
