Bootstrap 3 accordion chevron icons

Toggle accordion chevrons in Bootstrap 3

by Joseph Tate

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1 
        </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
<p>I say, we good Presbyterian Christians should be charitable in these things, and not fancy ourselves so vastly superior to other mortals, pagans and what not, because of their half-crazy conceits on these subjects. There was Queequeg, now, certainly entertaining the most absurd notions about Yojo and his Ramadan;&mdash;but what of that? Queequeg thought he knew what he was about, I suppose; he seemed to be content; and there let him rest. All our arguing with him would not avail; let him be, I say: and Heaven have mercy on us all&mdash;Presbyterians and Pagans alike&mdash;for we are all somehow dreadfully cracked about the head, and sadly need mending.</p>

<p>Towards evening, when I felt assured that all his performances and rituals must be over, I went up to his room and knocked at the door; but no answer. I tried to open it, but it was fastened inside. "Queequeg," said I softly through the key-hole:&mdash;all silent. "I say, Queequeg! why don't you speak? It's I&mdash;Ishmael." But all remained still as before. I began to grow alarmed. I had allowed him such abundant time; I thought he might have had an apoplectic fit. I looked through the key-hole; but the door opening into an odd corner of the room, the key-hole prospect was but a crooked and sinister one. I could only see part of the foot-board of the bed and a...

JavaScript

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);