boostrap sidebar collapse in icon when opens first time - html

Question

I have 2 collapse links, test3 and test
test3 is already collapsed so used in
test is not collapsed has no in
the problem:
this just happen when opens first time I don't know why, the arrow is already down in the link test should not, but after few clicks the arrow backs to work normal.
so test link should be arrow to the left because is not collapsed yet, right now if you see is already to arrow down, someone knows why?
jsfiddle: http://jsfiddle.net/Wc4xt/4399/
HTML:
<div class="sidebar">
<div class="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<i class="pull-left fa-lg fa fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">test3
</a>
</div>
<div class="collapse in collapse-styled" id="collapseExample1">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
test List
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
Create
</div>
</li>
<li>
<i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test
</a>
</div>
<div class="collapse collapse-styled" id="collapseExample">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
link List
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
test
</div>
</li>
</ul>
</div>
</div>
CSS:
.sidebar-wrapper {
height: 100%;
overflow-y: auto;
background: #2f3f4d;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav li {
text-indent: 22px;
line-height: 60px;
border-bottom: 1px solid #455b6f;
}
.sidebar-nav li a {
display: block;
height: 65px;
}
.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
color: $white;
background-color: black;
}
.collapse-link a.collapsed:after {
content: "\e080";
background-color: red;
}
.collapse-link a.collapsed {
color: white;
}
a {
text-decoration:none;
}
ul li {
list-style:none;
}

Answer 1

As you can see in your CSS, your arrow depends on collapsed class (not in).
You should add collapsed class to you link:
<a class="collapsed" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test</a>
JSFIDDLE

Answer 2

insert : class="collapsed" in your <a>