How to start closed Accordion

Question

Hello,

I have on my page an accordion, it is working perfectly, however, when starts the page it is already open. What I want is for it to come closed, has like?

HTML:

<div class="bs-example">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">TITULO 1</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <ul type="disc">
                    <li>TEXTO 1</li>        
                    <li>Texto 2</li>
                </ul>
                <i><a href="#"><p>Leia mais</p></a></i>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Titulo 2</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                 <ul type="disc">
                    <li>Texto 1</li>        
                    <li>Texto 2</li>
                </ul>
                <i><a href="h#"><p>Leia mais</p></a></i>
            </div>
        </div>
    </div>
</div>

CSS:

/* ACCORDION */

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

.panel-title > a {
    display: block;
    padding: 15px;
    text-decoration: none;
}

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

JS:

function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);

Ever since I thank!

Answer 1

Withdraws the class in of HTML.

Seeing the documentation of course the class in is used to open the section:

.collapse hides the content
.collapsing applied during the open/closed transition
.collapse.in shows the content

Example:

function toggleIcon(e) {
  $(e.target)
    .prev('.panel-heading')
    .find(".more-less")
    .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);

.panel-group .panel {
  border-radius: 0;
  box-shadow: none;
  border-color: #EEEEEE;
}

.panel-default>.panel-heading {
  padding: 0;
  border-radius: 0;
  color: #212121;
  background-color: #FAFAFA;
  border-color: #EEEEEE;
}

.panel-title {
  font-size: 14px;
}

.panel-title>a {
  display: block;
  padding: 15px;
  text-decoration: none;
}

.more-less {
  float: right;
  color: #212121;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: #EEEEEE;
}

<link href="https://maxcdn.bootstrapcdn.com/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="bs-example">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">TITULO 1</a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
          <ul type="disc">
            <li>TEXTO 1</li>
            <li>Texto 2</li>
          </ul>
          <i><a href="#"><p>Leia mais</p></a></i>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Titulo 2</a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <ul type="disc">
            <li>Texto 1</li>
            <li>Texto 2</li>
          </ul>
          <i><a href="h#"><p>Leia mais</p></a></i>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Try remove the class in of the following element

<div id="collapseOne" class="panel-collapse collapse">