1

Olá, Se alguém puder verificar meu código html e css por favor! Eu quero que ao clicar no botão zumbi ou multijogador quando um já está aberto, o outro seja desativado. Tipo o botao collapse multijogador está aberto, ao clicar no botão collapse zumbi o botão collapse multijogador suba e só desça o zumbi.

Pois ao clicar nos dois botao junto, todo o conteudo da pagina desce junto, não sei se tenho que dividir em colunas, não sei fazer isso. Na verdade, só de clicar em um botao collapse, todo o conteudo da pagina desce, mas bem pouco. Obrigado.

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>

1 Resposta 1

1

O que você quer se chama Accordion.

Tem um exemplo bem interessante no próprio site

Veja esse exemplo que fiz pra você, adaptando seu código:

O segredo está em adicionar um atributo chamado data-parent no elemento que será "collapsado". Este atributo deve ter o valor igual em todos os elementos que serão "collapsados" para dar lugar ao outro.

Enfim...

Dê uma olhada e vê se funciona.

Espero ter ajudado.

Abraços.

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>

2
  • Obrigado amigo, deu certo até. Obrigado pelo seu tempo. O problema ainda tem o problema de todo o conteúdo descer, só que desce e sobe mais rápido mas ainda assim é bem feio "/
    – lullinho
    14/07/2018 às 23:50
  • @lullinho tente usar a propriedade css: #pacote1, #zumbi1 { transition: none; }, desta forma não haverá transição na exibição dos collapses. E marque a resposta de Andrew como correta, pois acredito que te trouxe a solução. 16/07/2018 às 14:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .