Accordion Image Wrong When Page Loads

Question

I have and issue with an image I have on my Bootstrap accordions.

When the page first loads the accordion image should be an arrow down but it's displaying my arrow up. The arrow up should be displayed when the accordion is expanded.

If I expand the accordion obviously my image doesn't change but when it closes, it then displays my arrow down as expected and then the image changes as it should do up/down depending on the scenario.

A little hard to explain I know.

CSS

.panel-heading a:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e113";
    position: absolute;
    right: 2.5em;
    color: red;
}

.panel-heading a.collapsed:after
{
    content: "\e114";
    color: blue;
}

Accordion HTML

<div id="Generalaccordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#Generalaccordion" href="#GeneralcollapseOne">Sub menus</a>
            </h4>
        </div>
        <div id="GeneralcollapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">One</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Two</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Three</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Why don't you just add the collapsed class ?

Fiddle Working

HTML :

<div id="Generalaccordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#Generalaccordion" href="#GeneralcollapseOne" class="collapsed">Sub menus</a>
            </h4>
        </div>
        <div id="GeneralcollapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">One</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Two</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Three</a>
                </div>
            </div>
        </div>
    </div>
</div>