bootstrap accordion not collapsing on first load

Question

Here is my html view:

$('.collapse').on('shown.bs.collapse', function(){
    $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-up");
    }).on('hidden.bs.collapse', function(){
    $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-right");
    });

a.accordion-toggle {
    color: #000;
    font-size: 18px !important;
    font-family: 'Jost', sans-serif !important;
}

a.accordion-toggle.collapsed {
    color: #254fac !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
           <i class="fas fa-chevron-up"></i>
            Environmentally Friendly
           </a>
         </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    <i class="fas fa-chevron-right"></i>
                    Reliable buying and selling
                          </a>
                        </h4>
                      </div>
                      <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
                        </div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                            <i class="fas fa-chevron-right"></i>
                            Quality assuarance
                          </a>
                        </h4>
                      </div>
                      <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
                        </div>
                      </div>
                    </div>
                </div>

screenshot of my page:

On initial page load, I want the first accordion is to collapse.

I use
jquery: v3.2.1 ,
jquery-migrate-3.0.1.min.js ,
popper.min.js
and
bootstrap > v4.2.1

I have updated the code above please check this one. My problem is in after first load first accordion is not collapsing but after click any accordion it will work but i want first load first one is collapsed.

Does anything here help? https://stackoverflow.com/questions/19024218/bootstrap-3-collapse-change-chevron-icon-on-click or here? https://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon Can you make a codepen like this? https://codepen.io/glebkema/pen/QQOZRe Or, can you turn your code into a runnable snippet? — react_or_angluar, Dec 14 '20 at 22:46
Is just changing `` for `` for the first `` in your markup would be a fix? — Louys Patrice Bessette, Dec 15 '20 at 01:02
I have updated the snippet please check above my question @jqueryHtmlCSS — Shawn, Dec 16 '20 at 17:38
The snippet is almost working. It's very unusual for the arrow to point up. Why is the arrow pointing up? Your code looks great, your English is confusing. — react_or_angluar, Dec 16 '20 at 22:54
brother please check my question again, i said my accordion is working but i want after first load first accordion should be collapsed it should open on first load, Did you understand? @jqueryHtmlCSS — Shawn, Dec 17 '20 at 04:31

Nikhil Patil · Answer 1 · 2020-12-17T05:31:18.773

You can just collapse all accordion on load -

$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-right");

Final Code -

$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-right");
$('.collapse').on('shown.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-up");
}).on('hidden.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-right");
});

a.accordion-toggle {
  color: #000;
  font-size: 18px !important;
  font-family: 'Jost', sans-serif !important;
}

a.accordion-toggle.collapsed {
  color: #254fac !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <i class="fas fa-chevron-up"></i>
          Environmentally Friendly
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <i class="fas fa-chevron-right"></i>
          Reliable buying and selling
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <i class="fas fa-chevron-right"></i>
          Quality assuarance
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

EDIT 1 :

I also realized you are adding fa-chevron-up class to your first accordion. You can change it to fa-chevron-right and that should solve your problem.

Final Code -

$('.collapse').on('shown.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-up");
}).on('hidden.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-right");
});

a.accordion-toggle {
  color: #000;
  font-size: 18px !important;
  font-family: 'Jost', sans-serif !important;
}

a.accordion-toggle.collapsed {
  color: #254fac !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <i class="fas fa-chevron-right"></i>
          Environmentally Friendly
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <i class="fas fa-chevron-right"></i>
          Reliable buying and selling
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <i class="fas fa-chevron-right"></i>
          Quality assuarance
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

EDIT 2:

If you want to expand your first accordion just add class show to your first accordion.

Final Code -

$('.collapse').on('shown.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-up");
}).on('hidden.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-right");
});

a.accordion-toggle {
  color: #000;
  font-size: 18px !important;
  font-family: 'Jost', sans-serif !important;
}

a.accordion-toggle.collapsed {
  color: #254fac !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <i class="fas fa-chevron-up"></i>
          Environmentally Friendly
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse show">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <i class="fas fa-chevron-right"></i>
          Reliable buying and selling
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <i class="fas fa-chevron-right"></i>
          Quality assuarance
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

but your snippet not working first accordion not collapsed ? — Shawn, Dec 17 '20 at 05:11
brother first accordion and icon should be collapsed icon is right it collapsed but text is not showing on first load — Shawn, Dec 17 '20 at 05:12
Oh sorry, I misunderstood the problem. I will update the code — Nikhil Patil, Dec 17 '20 at 05:12
You want the first accordion to expand right? and not collapse? — Nikhil Patil, Dec 17 '20 at 05:13
brother it always active while i am click another it wont stop collapsing -_- :( — Shawn, Dec 17 '20 at 16:10

score 0 · Answer 2 · answered Dec 17 '20 at 05:05

0

Just change;

       <i class="fas fa-chevron-up"></i>
        Environmentally Friendly
       </a>

to be;

       <i class="fas fa-chevron-right"></i>
        Environmentally Friendly
       </a>

answered Dec 17 '20 at 05:05

Dexterians

1,011
1
5
12

bootstrap accordion not collapsing on first load

2 Answers2

EDIT 1 :

EDIT 2: