Icon is not displayed as expected

Question

I'm using Bootstrap panel (collapse and collapse in) class to create a form. I have two panels and I want one to start open and one to start closed. On panel heading I'm using a Glyphicon "^" to close/open the panel when user click on it. In panel 2 it starts as expected, but after clicked twice, it shows the down glyph when it should show up, and up when it should show down. The code example demonstrates well.

How can I solve this?

.btnAgregar:after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
}
.btnAgregar.collapsed:after {
  content: "\e114";
}
.btnAgregar2:after {
  font-family: "Glyphicons Halflings";
  content: "\e114";
}
.btnAgregar2.collapsed:after {
  content: "\e113";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5>Panel 1</h5>
      <span class="btn btn-xs btnAgregar" data-toggle="collapse" data-target="#formulario3"></span>
    </div>
    <div id="formulario3" class="collapse in">
      <div class="panel-body">
        <div class="col-md-12">
          A
        </div>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5>Panel 2</h5>
      <span class="btn btn-xs btnAgregar2" data-toggle="collapse" data-target="#formulario2"></span>
    </div>
    <div id="formulario2" class="collapse">
      <div class="panel-body">
        <div class="col-md-12">
          B
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

The class btnAgregar2 is useless.

This line:

<span class="btn btn-xs btnAgregar2" data-toggle="collapse" data-target="#formulario2"></span>

must be changed in:

<span class="btn btn-xs btnAgregar collapsed" data-toggle="collapse" data-target="#formulario2"></span>

This because the second panel must be collapsed at startup.

The snippet:

.btnAgregar:after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
}
.btnAgregar.collapsed:after {
  content: "\e114";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5>Panel 1</h5>
            <span class="btn btn-xs btnAgregar" data-toggle="collapse" data-target="#formulario3"></span>
        </div>
        <div id="formulario3" class="collapse in">
            <div class="panel-body">
                <div class="col-md-12">
                    A
                </div>
            </div>
        </div>
    </div>
</div>

<hr />

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5>Panel 2</h5>
            <span class="btn btn-xs btnAgregar collapsed" data-toggle="collapse" data-target="#formulario2"></span>
        </div>
        <div id="formulario2" class="collapse">
            <div class="panel-body">
                <div class="col-md-12">
                    B
                </div>
            </div>
        </div>
    </div>
</div>