How to make a collapse button Bootstrap disable the other

Navigation
2

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

What happens:

When I click the first button the content expands. When I click on the second button the second content expands below.

What I wanted:

I wanted when I clicked on the first button the content would open as it already did, but when I clicked on the second button the content of the first button closed, 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>
    
asked by anonymous 20.07.2017 / 15:29

2 answers

0

You can use jQuery for this: 

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

I've already used this code in a project, it's supposed to work ...

    
20.07.2017 / 16:28
0

Bruno Rosa, in Bootstrap in the documentation of 3, in Components has on 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><!--LatestcompiledandminifiedCSS--><linkrel="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>

link

In Bootstrap 4 just change the Panel at a glance. link

    
14.08.2018 / 19:47
How to replace the key of an array with a variable? [closed] How to do date validation? [closed]