Bootstrap HTML boot Collapse how to disable one when opening another

Asked

Viewed 779 times

1

Hello, If anyone can check my html and css code please! I want that when clicking the zombie or multiplayer button when one is already open, the other is disabled. Like the Multiplayer Pod Boot is open, when you click the Zombie Pod button the Multiplayer Pod Button goes up and only the Zombie goes down.

Because when I click on both buttons together, all the content of the page goes down together, I don’t know if I have to split into columns, I don’t know how to do that. In fact, just by clicking on a Collapse button, all the 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">
  <div class="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>

javascript html css bootstrap-4

1 answer

1

What you want is called Accordion.

There’s a very interesting example in own website

Look at this example I made for you, adapting your code:

The secret is to add an attribute called data-parent in the element that will be "collapsado". This attribute must have the same value in all the elements that will be "collapsados" to give place to the other.

Finally...

Take a look and see if it works.

I hope I’ve 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">
      <div class="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>

  • Thanks buddy, it worked out. Thanks for your time. The problem still has the problem of all content going down, only it goes down and up faster but it’s still pretty ugly "/

  • @lullinho try to use the css property: #pacote1, #zumbi1 { Transition: None; }, this way there will be no transition in the display of collapses. And mark Andrew’s answer as correct, because I believe it brought you the solution.

Browser other questions tagged javascript html css bootstrap-4

You are not signed in. Login or sign up in order to post.