title: Adding Up/Down icon to Twitter Bootstrap accordion not working?
body: <p>css code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>Bootstrap:</p>
  
  <pre><code>&lt;div class="accordion-group accordion-caret"&gt;
          &lt;div class="accordion-heading"&gt; 
                &lt;a class="accordion-toggle" data-toggle="collapse" id="accordion_toggle" data-parent="#accordion2" href="#collapseFour"&gt;Maps&lt;/a&gt;
           &lt;/div&gt;
  
          &lt;div id="collapseFour" class="accordion-body collapse"&gt;
              &lt;div&gt; 
                  &lt;div class="accordion-inner"&gt;
                        &lt;div class="tabbable tabs-left"&gt;hello&lt;/div&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>