Bootstrap: Collapsing/expading with icons issue

Question

I use bootstrap JavaScript library and made it work collapse/expand element. The code looks as following:

<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="color:firebrick; font-size: large;">
                        E-TICKET...
                    </a>
                    <i class="icon-large icon-arrow-down"></i>
                </h1>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    Some text...
                </div>
            </div>
        </div>
    </div>
</div>

As you can see, I was able to show the arrow-down icon. When I click accordion element the text expands down what I wanted, but I need to toggle arrow-down icon to arrow-up icon at that moment and vice versa, when click accordion element to collapse text to show arrow-down icon again.

How to do it?

Kevin Bowersox · Accepted Answer · 2013-10-21T10:59:55.257

4

CSS

/** 
    Created new class toggle arrow that uses the sprite 
    coordinates for the up and down arrows in bootstrap.
**/

.toggle-arrow{
    background-position: -289px -96px;
}

/** 
    This specific selector will cause the toggling
    bootstrap adds and removes the collapsed class on the accordian.
**/

.collapsed .toggle-arrow{
    background-position: -312px -96px;
}

HTML

<!-- Nested the i tag within the a toggle by collapsed -->
<div class="panel-heading">
    <h1 class="panel-title">
        <!-- Initialized a with class="collapsed" -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
              style="color:firebrick; font-size: large;" class="collapsed">
            E-TICKET...
            <i class="icon-large toggle-arrow"></i>
        </a>
    </h1>
</div>

JS Fiddle: http://jsfiddle.net/uBzeZ/1/

edited Oct 21 '13 at 10:59

answered Oct 21 '13 at 09:29

Kevin Bowersox

93,289
19
159
189

There's no toggle-arrow class in bootstrap library. – tesicg Oct 21 '13 at 10:45
There are 2 classes in bootstrap.css: .icon-arrow-up { background-position: -289px -96px; } and .icon-arrow-down { background-position: -312px -96px; } – tesicg Oct 21 '13 at 10:48
@tesicg I know there is not. I made that class, then use it to toggle the arrow image based upon the presence of .collapse – Kevin Bowersox Oct 21 '13 at 10:58
What's happening when I use your code? When I open the page with bootstrap code, the title "E-TICKET" and arrow-down icon are there, which is fine. When I click the title "E-TICKET" after that, the text expands, but the icon stays arrow-down, not arrow-up. When I click the title "E-TICKET" again to collapse it, the text collapses, and icon turns to arrow-up, which is not correct. There should be arrow-down icon. – tesicg Oct 21 '13 at 11:34
So, the icon is toggling, but not in correct way, because it didn't change on first click. – tesicg Oct 21 '13 at 11:42
@tesicg Make sure you initially add the `collapsed` class to the `a` tag as depicted in the answers markup – Kevin Bowersox Oct 21 '13 at 12:01
@Kevin Thanks for this solution! It's not mentioned in the bootstrap spec that `class="collapsed"` is assigned to /removed from the controlling element when collapsing is performed. – eugene82 Mar 27 '14 at 11:29

score 1 · Answer 2 · edited May 23 '17 at 11:58

Kevin's answer works great! The great thing about his answer is that it also works with Bootstrap 2, unlike some other answers I have found (e.g. Bootstrap 3 Collapse show state with Chevron icon).

To answer your question tesicg, what Kevin Bowersox is doing is a css sprite technique, taking advantage of the bootstrap sprite.

Check out http://css-tricks.com/css-sprites/ for a link to a great tool and explanation of sprites.

I personally, wanted to use chevron icons instead, so I modified Kevin's answer like so:

/** Created new class toggle arrow that uses the sprite 
    coordinates for the up and down arrows in bootstrap. **/
.toggle-arrow{
    background-position: -312px -116px;
}

/** This specific selector will cause the toggling
    bootstrap adds and removes the collapsed class on the accordian. **/
.collapsed .toggle-arrow{
    background-position: -454px -72px;
}

Basically, what I did was shift the "viewport" pixels, if you will, to expose the chevron portion of the sprite instead of the up/down arrows.

I also added the pull-right class so that the icons are on the far-right of the accordian heading, like so:

<i class="icon-large toggle-arrow pull-right"></i>

Thanks Kevin, this helped a bunch!

Bootstrap: Collapsing/expading with icons issue

2 Answers2