BS3 - toggle icon class on collapse

I can't seem to figure out why this isn't toggling the icon class on click. I am showing/hiding an accordion on click of the arrows, but I also want to toggle the font awesome icon to change the arrow at the same time (fa-angle-up / fa-angle-down).

js fiddle

html:

<ul id="archivegroup">
    <li class="panel">
        <a href="#alist0" data-parent="#archivegroup" data-toggle="collapse" class="accordion-toggle" aria-expanded="true"><i class="fa fa-angle-down"></i></a> <a href="/archive/2015">2015</a> <span class="count">(2)</span>
        <ul class="collapse in" id="alist0" aria-expanded="true" style="">
            <li>
                <a href="/archive/2015-09">September</a> <span class="count">(1)</span>
            </li>
            <li>
                <a href="/archive/2015-05">May</a> <span class="count">(1)</span>
            </li>
        </ul>
    </li>
    <li class="panel">
        <a href="#alist1" data-parent="#archivegroup" data-toggle="collapse" class="accordion-toggle collapsed" aria-expanded="false"><i class="fa fa-angle-up"></i></a> <a href="/archive/2013">2013</a> <span class="count">(1)</span>
        <ul class="collapse " id="alist1" aria-expanded="false">
            <li>
                <a href="/2013-09">September</a> <span class="count">(1)</span>
            </li>
        </ul>
    </li>
    <li class="panel">
        <a href="#alist2" data-parent="#archivegroup" data-toggle="collapse" class="accordion-toggle collapsed" aria-expanded="false"><i class="fa fa-angle-up"></i></a> <a href="/archive/2010">2010</a> <span class="count">(1)</span>
        <ul class="collapse " id="alist2" aria-expanded="false">
            <li>
                <a href="/archive/2010-09">September</a> <span class="count">(1)</span>
            </li>
        </ul>
    </li>
</ul>

js:

function toggleChevron(e) {
    $(e.target)
        .prev('panel')
        .find("i.fa")
        .toggleClass('fa-angle-up fa-angle-down');
}
$('#archivegroup').on('hidden.bs.collapse', toggleChevron);
$('#archivegroup').on('shown.bs.collapse', toggleChevron);

Solution

You aren't getting the panel class, since you have missed . plus you are trying to find prev element which I suspect will not consider parent instead it considers siblings, which it will not find. So use .closest to get .panel parent. So below are the changes:

function toggleChevron(e) {
    $(e.target).closest('.panel').find('i.fa')
        .toggleClass('fa-angle-up fa-angle-down');
}
$('#archivegroup').on('hidden.bs.collapse', toggleChevron);
$('#archivegroup').on('shown.bs.collapse', toggleChevron);

DEMO