Collapse Bootstrap

Question

I’m wearing a collapse in Bootstrap, however, I would like that when I click on a button, the phrase of the other button disappears and vice versa. I have tried to do everything.

Can someone help me implement the code?

<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>

<section class="col-lg-8 margin-auto">
    <p class="titulo-gestao"><a class="btn btn-primary" role="button" data-toggle="collapse" data-target="#gestao" aria-controls="gestao">Gestão Empresarial</a></p>
    <p class="titulo-governanca"><a class="btn btn-primary" type="button" data-toggle="collapse" data-target="#governanca" aria-controls="governanca">Governança Corporativa</a></p>
</section>


<section class="container clear">
    <section class="row">
        <section class="col-lg-8 margin-auto">
            <div class="collapse" id="gestao">
                <div class="well"> Gestão Empresarial</div>
            </div>
            <div class="collapse" id="governanca">
                <div class="well"> Governança</div>
            </div>
        </section>
    </section>
</section>

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

Answer 1

You can solve it like this:

Example 1:

$("[data-target='#gestao']").click(function() {
  $("#governanca").removeClass('in');
});

$("[data-target='#governanca']").click(function() {
  $("#gestao").removeClass('in');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<p class="titulo-gestao"><a class="btn btn-primary" role="button" data-toggle="collapse" data-target="#gestao" aria-controls="gestao">Gestão Empresarial</a>
</p>
<p class="titulo-governanca"><a class="btn btn-primary" type="button" data-toggle="collapse" data-target="#governanca" aria-controls="governanca">Governança Corporativa</a>
</p>



<section class="container clear">
  <section class="row">
    <section class="col-lg-8">
      <div class="collapse" id="gestao">
        <div class="well">Gestão Empresarial</div>
      </div>
      <div class="collapse" id="governanca">
        <div class="well">Governança</div>
      </div>
    </section>
  </section>
</section>

or in an even smaller and more Generic way:

Example 2:

$("a").click(function() {
  $("div").removeClass('in');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<p class="titulo-gestao"><a class="btn btn-primary" role="button" data-toggle="collapse" data-target="#gestao" aria-controls="gestao">Gestão Empresarial</a>
</p>
<p class="titulo-governanca"><a class="btn btn-primary" type="button" data-toggle="collapse" data-target="#governanca" aria-controls="governanca">Governança Corporativa</a>
</p>



<section class="container clear">
  <section class="row">
    <section class="col-lg-8">
      <div class="collapse" id="gestao">
        <div class="well">Gestão Empresarial</div>
      </div>
      <div class="collapse" id="governanca">
        <div class="well">Governança</div>
      </div>
    </section>
  </section>
</section>