noob-fella noob-fella - 7 days ago 5
CSS Question

boostrap sidebar collapse in icon when opens first time

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>
<a href="#">test List</a>
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
<a href="#">Create</a>
</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>
<a href="">link List</a>
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
<a href="">test</a>
</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

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