Bootstrap HTML button collapse how to disable one when opening another

Navigation
0

Hello, If anyone can check my html and css code please! I want that when clicking on the zombie or multiplayer button when one is already open, the other one is disabled. Type the multiplayer collapse button is open, by clicking on the collapse button the collapse button the multiplayer collapse up and down the zombie.

Because clicking the two buttons together, all the content of the page goes down, I do not know if I have to divide into columns, I do not know how to do that. In fact, just by clicking on a collapse button, the entire content of the page goes down, but very little. Thank you. 

body{
	background: url(paper.gif) no-repeat center center fixed; 
	background-color: white;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #ffecd2;
margin: 3px;

}

h1, h4 {
  text-align: center;
  alignment-baseline: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 60px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: 
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey

}

.card{
	width: 300px;
	height: 100%;
	margin: 10px;

	display: inline-block;
	align-content: left;
	text-align: center;
	float: none;
	margin-bottom: 5px;

}


.card-img-top{
	
	object-fit: cover;
	margin: 14px;
	width: 80%;
    height: 80%;
    display: flex;
	display: inline-block;
 

}

.card-text{
	text-align: left;
	margin: 5px;
}


a{
	margin: 10px;
}
.cartao{
	text-align: center;
	
}
.comentarios{
	margin: 40px;

}
<!DOCTYPE html>
<html>
<head>
	<title>Unlock all</title>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

</head>

<body>



	<a href="index.html">Voltar</a>
  <br> <br>
	<h1>Unlock All BO3 PS4</h1>

<br><br>

<div class="cartao">
<div class="card">
  <img class="card-img-top" src="https://orig00.deviantart.net/1491/f/2016/052/3/6/call_of_duty_black_ops_3___icon_by_blagoicons-d9smbkl.png"><divclass="card-body">
    <h5 class="card-title">PACOTE 1</h5>
  <a class="btn btn-primary" data-toggle="collapse" href="#pacote1" role="button" aria-expanded="false" aria-controls="collapseExample">
   MultiJogador
  </a>
    <button class="btn btn-primary" data-toggle="collapse" href="#zumbi1" role="button" aria-expanded="false" aria-controls="collapseExample">
    Zumbi 
  </button>


  <br><br>

<div class="list-group collapse" id="pacote1">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL MIL</button>
  <button type="button" class="list-group-item list-group-item-action">CAMUFLAGEM DARK MATTER EM TODAS ARMAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS CAMUFLAGENS COMUNS LIBERADAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODOS ESPECIALISTAS HÉROIS(ROUPA DOURADA)</button>
  <button type="button" class="list-group-item list-group-item-action">1.85 B/M | 0.91 V/D | 75 MIL BAIXAS</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MESTRE LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MULTIJOGADOR LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS ARMAS PRESTIGE MÁXIMO</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>85% DOS DESAFIOS COMPLETOS</button>
</div>
<div class="list-group collapse" id="zumbi1">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 170</button>
    <button type="button" class="list-group-item list-group-item-action">100 mil baixas</button>
</div>
  </div>
</div>

<div class="card">
  <img class="card-img-top" src="https://orig00.deviantart.net/f9b1/f/2016/043/6/4/black_ops_3_icon_2_by_komic_graphics-d9ri8y5.png"alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">PACOTE 2</h5>
  <a class="btn btn-primary" data-toggle="collapse" href="#pacote2" role="button" aria-expanded="false" aria-controls="collapseExample">
    MultiJogador
  </a>
    <button class="btn btn-primary" data-toggle="collapse" href="#zumbi2" role="button" aria-expanded="false" aria-controls="collapseExample">
    Zumbi 
  </button>
  <br><br>
<div class="list-group collapse" id="pacote2">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 437</button>
  <button type="button" class="list-group-item list-group-item-action">CAMUFLAGEM DARK MATTER EM TODAS ARMAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS CAMUFLAGENS COMUNS LIBERADAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODOS ESPECIALISTAS HÉROIS(ROUPA DOURADA)</button>
  <button type="button" class="list-group-item list-group-item-action">1.85 B/M | 0.50 V/D | 43 MIL BAIXAS</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MESTRE LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MULTIJOGADOR LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS ARMAS PRESTIGE MÁXIMO</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>97% DOS DESAFIOS COMPLETOS</button>
</div>
<div class="list-group collapse" id="zumbi2">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 170</button>
    <button type="button" class="list-group-item list-group-item-action">100 mil baixas</button>
</div>
  </div>
</div>

<div class="card">
  <img class="card-img-top" src="https://orig00.deviantart.net/b1d8/f/2015/309/b/4/call_of_duty_black_ops_iii_spectre_specialist_icon_by_outlawninja-d9fnvcq.png"alt="Card image cap">
  <div class="card-body">
     <h5 class="card-title">PACOTE 3</h5>
<div>
  <a class="btn btn-primary" data-toggle="collapse" href="#pacote3" role="button" aria-expanded="false" aria-controls="collapseExample">
    MultiJogador
  </a>
    <button class="btn btn-primary" data-toggle="collapse" href="#zumbi3" role="button" aria-expanded="false" aria-controls="collapseExample">
    Zumbi 
  </button>
</div>
<br>
<div class="list-group collapse" id="pacote3">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 848</button>
  <button type="button" class="list-group-item list-group-item-action">CAMUFLAGEM DARK MATTER EM TODAS ARMAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS CAMUFLAGENS COMUNS LIBERADAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODOS ESPECIALISTAS HÉROIS(ROUPA DOURADA)</button>
  <button type="button" class="list-group-item list-group-item-action">1.32 B/M | 1.02 V/D | 137 MIL BAIXAS</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MESTRE LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MULTIJOGADOR LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS ARMAS PRESTIGE MÁXIMO</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>82% DOS DESAFIOS COMPLETOS</button>
</div>
<div class="list-group collapse" id="zumbi3">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 170</button>
    <button type="button" class="list-group-item list-group-item-action">100 mil baixas</button>
</div>
  </div>
</div>





<div class="card">
  <img class="card-img-top" src="https://orig00.deviantart.net/f9b1/f/2016/043/6/4/black_ops_3_icon_2_by_komic_graphics-d9ri8y5.png"alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">PACOTE 4</h5>
  <a class="btn btn-primary" data-toggle="collapse" href="#pacote4" role="button" aria-expanded="false" aria-controls="collapseExample">
    MultiJogador
  </a>
  <button class="btn btn-primary" data-toggle="collapse" href="#zumbi4" role="button" aria-expanded="false" aria-controls="collapseExample">
    Zumbi 
  </button>
  <br><br>
<div class="list-group collapse" id="pacote4">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 437</button>
  <button type="button" class="list-group-item list-group-item-action">CAMUFLAGEM DARK MATTER EM TODAS ARMAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS CAMUFLAGENS COMUNS LIBERADAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODOS ESPECIALISTAS HÉROIS(ROUPA DOURADA)</button>
  <button type="button" class="list-group-item list-group-item-action">1.85 B/M | 0.50 V/D | 43 MIL BAIXAS</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MESTRE LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MULTIJOGADOR LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS ARMAS PRESTIGE MÁXIMO</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>97% DOS DESAFIOS COMPLETOS</button>
</div>
<div class="list-group collapse" id="zumbi4">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 170</button>
    <button type="button" class="list-group-item list-group-item-action">100 mil baixas</button>
</div>
  </div>
</div>




<div class="card">
  <img class="card-img-top" src="https://orig00.deviantart.net/f9b1/f/2016/043/6/4/black_ops_3_icon_2_by_komic_graphics-d9ri8y5.png"alt="Card image cap">
  <div class="card-body">
    <h5>PACOTE 5</h5>
  <a class="btn btn-primary" data-toggle="collapse" href="#pacote5" role="button" aria-expanded="false" aria-controls="collapseExample">
    MultiJogador
  </a>
  <button class="btn btn-primary" data-toggle="collapse" href="#zumbi5" role="button" aria-expanded="false" aria-controls="collapseExample">
    Zumbi 
  </button>
  <br><br>
<div class="list-group collapse" id="pacote5">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 437</button>
  <button type="button" class="list-group-item list-group-item-action">CAMUFLAGEM DARK MATTER EM TODAS ARMAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS CAMUFLAGENS COMUNS LIBERADAS</button>
  <button type="button" class="list-group-item list-group-item-action">TODOS ESPECIALISTAS HÉROIS(ROUPA DOURADA)</button>
  <button type="button" class="list-group-item list-group-item-action active">1.85 B/M | 0.50 V/D | 43 MIL BAIXAS</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MESTRE LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MULTIJOGADOR LIBERADO</button>
  <button type="button" class="list-group-item list-group-item-action">TODAS ARMAS PRESTIGE MÁXIMO</button>
  <button type="button" class="list-group-item list-group-item-action active" disabled>97% DOS DESAFIOS COMPLETOS</button>
</div>
<div class="list-group collapse" id="zumbi5">

  <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 170</button>
    <button type="button" class="list-group-item list-group-item-action">100 mil baixas</button>
</div>
  </div>
</div>  






<!-- termino do cartao -->
</div>

<br><br><br>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


</body>
</html>
    
asked by anonymous 14.07.2018 / 20:16

1 answer

0

What you want is called Accordion .

You have a very interesting example in the site

See this example I made for you, adapting your code:

The key is to add an attribute called data-parent to the element that will be "collapsed". This attribute must have the equal value in all the elements that will be "collapsed" to give way to the other.

Anyway ...

Take a look and see if it works.

I hope I have helped.

Hugs. 

body {
  background: url(paper.gif) no-repeat center center fixed;
  background-color: white;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #ffecd2;
  margin: 3px;
}

h1,
h4 {
  text-align: center;
  alignment-baseline: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 60px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey
}

.card {
  width: 300px;
  height: 100%;
  margin: 10px;
  display: inline-block;
  align-content: left;
  text-align: center;
  float: none;
  margin-bottom: 5px;
}

.card-img-top {
  object-fit: cover;
  margin: 14px;
  width: 80%;
  height: 80%;
  display: flex;
  display: inline-block;
}

.card-text {
  text-align: left;
  margin: 5px;
}

a {
  margin: 10px;
}

.cartao {
  text-align: center;
}

.comentarios {
  margin: 40px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Unlock all</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

</head>

<body>



  <a href="index.html">Voltar</a>
  <br> <br>
  <h1>Unlock All BO3 PS4</h1>

  <br><br>

  <div class="cartao">
    <div class="card">
      <img class="card-img-top" src="https://orig00.deviantart.net/1491/f/2016/052/3/6/call_of_duty_black_ops_3___icon_by_blagoicons-d9smbkl.png"><divclass="card-body" id="callofduty">
        <h5 class="card-title">PACOTE 1</h5>
        <button class="btn btn-primary" data-toggle="collapse" data-target="#pacote1" role="button" aria-expanded="true" aria-controls="collapseOne">
   MultiJogador
  </button>
        <button class="btn btn-primary" data-toggle="collapse" data-target="#zumbi1" role="button" aria-expanded="false" aria-controls="collapseExample">
    Zumbi 
  </button>


        <br><br>

        <div class="list-group collapse" id="pacote1" data-parent="#callofduty">

          <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL MIL</button>
          <button type="button" class="list-group-item list-group-item-action">CAMUFLAGEM DARK MATTER EM TODAS ARMAS</button>
          <button type="button" class="list-group-item list-group-item-action">TODAS CAMUFLAGENS COMUNS LIBERADAS</button>
          <button type="button" class="list-group-item list-group-item-action">TODOS ESPECIALISTAS HÉROIS(ROUPA DOURADA)</button>
          <button type="button" class="list-group-item list-group-item-action">1.85 B/M | 0.91 V/D | 75 MIL BAIXAS</button>
          <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MESTRE LIBERADO</button>
          <button type="button" class="list-group-item list-group-item-action">QUASE TODOS CARTÕES MULTIJOGADOR LIBERADO</button>
          <button type="button" class="list-group-item list-group-item-action">TODAS ARMAS PRESTIGE MÁXIMO</button>
          <button type="button" class="list-group-item list-group-item-action" disabled>85% DOS DESAFIOS COMPLETOS</button>
        </div>
        <div class="list-group collapse" id="zumbi1" data-parent="#callofduty">

          <button type="button" class="list-group-item list-group-item-action active">PRESTIGE MASTER LEVEL 170</button>
          <button type="button" class="list-group-item list-group-item-action">100 mil baixas</button>
        </div>
      </div>
    </div>


    <!-- termino do cartao -->
  </div>

  <br><br><br>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


</body>

</html>
    
14.07.2018 / 21:14
Using Telnet with IDTelnet (Delphi) Show value of nfe xml tags in columns of datagridview