How to start Accordion closed

Question

How to start Accordion closed

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Hello,

I have an accordion on my page, it works perfectly, but when the page starts it is already open. What I want is for it to come closed, does it have?

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);

Thank you!

javascript html css accordion

asked by anonymous 17.04.2017 / 16:22

2 answers

1

Try remove the class in of the following element

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

17.04.2017 / 16:27

external HTML in div without server How to limit the size of a div

score 2 · Accepted Answer

Remove the in class from HTML.

Viewing the documentation is Of course, the in class is used to open the section:

.collapse hides content% .collapsing applied during open / closed transition
.collapse.in shows 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><scriptsrc="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>