How to make one button collapse Bootstrap disable the other

Question

How to make one button collapse Bootstrap disable the other

I created two buttons collapse in Bootstrap with two different content.

What happens:

When I click the first button the content expands. When I click the second button the second content expands at the bottom.

What I wanted:

I wanted that when I clicked the first button the content would open as it already does, but when I clicked the second button the content of the first would close leaving only the second content.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 margem-baixa-5">
      <button type="button" class="btn btn-outline-primary btn-block btn-vert" data-toggle="collapse" href="#jan-cor-2f" aria-expanded="false">Abrir: 2 Folhas</button>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 margem-baixa-5">
      <button type="button" class="btn btn-outline-primary btn-block btn-vert" data-toggle="collapse" href="#jan-cor-3f" aria-expanded="false">Abrir: 3 Folhas</button>
    </div>
  </div>
</div>
<div class="collapse" id="jan-cor-2f">
  <div class="container">
    <div class="row" align="center">
      <?php  include"pages/ecommece/inc/jan-cor/2f-ven/jan-cor-2f-ven-1500x800.php"; ?>
      <?php  include"pages/ecommece/inc/jan-cor/2f-ven/jan-cor-2f-ven-1500x1000.php"; ?>

    </div>
  </div>
</div>
<div class="collapse" id="jan-cor-3f">
  <div class="container">
    <div class="row" align="center">
      <?php  include"pages/ecommece/inc/jan-cor/3f/jan-cor-3f-1500x800.php"; ?>
      <?php  include"pages/ecommece/inc/jan-cor/3f/jan-cor-3f-1500x1000.php"; ?>

    </div>
  </div>
</div>
</div>

2

html css bootstrap-3

Author: Woss, 2017-07-20

Source

2 answers

score 0 · Answer 1

You can use jQuery for this:

$('#id-botao').click(function(){
  $('#div-esconder').collapse('hide');
});

I have already used this code in a project, it is to work...

0

Author: Patrick Oliveira, 2017-07-20 14:28:51

score 0 · Answer 2

Bruno Rosa, in Bootstrap in the documentation of 3, in components has about Collapse, where you have the possibility to use Accordion in your case, test the code below using Accordion.

.panel {
  box-shadow: none !important;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">

  <a role="button" class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    Jan 2F
  </a>
  <a class="btn btn-default" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    Jan 3F
  </a>
  


  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel">
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
        <div>
          Include Jan 2F
        </div>
      </div>
    </div>
    <div class="panel">
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
        <div>
          Include Jan 3F
        </div>
      </div>
    </div>
  </div>
</div>

Https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion

In Bootstrap 4 Changes Only the Panel, at a glance. https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example