向Twitter Bootstrap手风琴添加Up / Down图标不起作用？

Question

css code:

.accordion-caret .accordion-toggle:hover {
    text-decoration: none;
}
.accordion-caret .accordion-toggle:hover span, .accordion-caret .accordion-toggle:hover strong {
    text-decoration: underline;
}
.accordion-caret .accordion-toggle:before {
    font-size: 25px;
    vertical-align: -3px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
    content:"▾";
    margin-right: 0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
    content:"▸";
    margin-right: 0px;
}

Bootstrap:

<div class="accordion-group accordion-caret">
        <div class="accordion-heading"> 
              <a class="accordion-toggle" data-toggle="collapse" id="accordion_toggle" data-parent="#accordion2" href="#collapseFour">Maps</a>
         </div>

        <div id="collapseFour" class="accordion-body collapse">
            <div> 
                <div class="accordion-inner">
                      <div class="tabbable tabs-left">hello</div> 
                </div>
            </div>
        </div>
</div>

In the above i have given my code for accordion.so i have 3 accordions of same type.so by default the first accordion is opened and all the other accordions will be closed.so every thing works fine but the up/down arrows are not working properly.its showing fine for first accordion(down arrow as accordion is opened) but its showing the same arrow(down) for others too while it must show up arrow(as accordions are closed)..any help would be appreciated?

Answer 1

I believe that you have to add manually .collapsed class to each of closed accordions .accordion-toggle elements.

like:

<a class="accordion-toggle collapsed" data-toggle="collapse" id="accordion_toggle" data-parent="#accordion2" href="#collapseFour">Maps</a>