2

Achei várias respostas aqui, porém para o bootstrap 3. Até tentei adaptar para o 4 mas sem sucesso.

Estou tentando fazer com que quando mostre um collapse esconda o outro e vice-versa(não posso usar "id" estático pois vai ter várias categorias adicionada pelo usuário então nunca vou saber o id em questão).

$(function () { 
		    $('.overlay').on('click', function (e) {
		        var active = $( e.currentTarget );

		        
		            $('.overlay').not(this).removeClass( 'active');
		            $('.overlay').not(this).removeClass( 'collapse');
		            $(this).addClass( 'active');
		        if (active.attr( 'aria-expanded') === 'true') {   
		            $('.overlay').not(this).addClass( 'collapsed');
		            not(active).attr( 'aria-expanded') === 'true';
		        }
		    });
		    $('.title').on('click', function (e) {
		        var active = $( e.currentTarget );
		            $(this).next().addClass( 'active');
		    });
		});
#categorias {padding: 80px 0;}
#categorias .categoria {position: relative;cursor: pointer;}
#categorias .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#categorias .categoria img {filter: brightness(0.5);transition: all 500ms;}
#categorias .categoria:hover img {filter: brightness(1);}
#categorias .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#categorias .categoria:hover .overlay, #categorias .active {background: rgba(151, 2, 2, 0.8);}
#categorias .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#categorias .categoria:hover .divider {height: 17px;}
#categorias ul {padding: 0;margin: 0;}
#categorias ul li {list-style: none;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<section id="categorias">
			<div class="row no-gutters" id="list-categorias">
				<div class="col-6 col-md-3 categoria" id="grelhas_head">
					<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
					<h2 class="title" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas">grelhas argentinas</h2>
					<span class="overlay" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas"></span>
					<span class="divider"></span>
				</div>
				
				<div class="col-6 col-md-3 categoria" id="grelhas2_head">
					<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
					<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
					<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
					<span class="divider"></span>
				</div>
			</div>
			<div class="row no-gutters">
			  <div class="col">
			    <div class="collapse" id="grelhas" aria-labelledby="grelhas_head" data-parent="#list-categorias">
			      <div class="card card-body">
			        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			      </div>
			    </div>
			  </div>
			  <div class="col">
			    <div class="collapse" id="multiCollapseExample2" aria-labelledby="grelhas2_head" data-parent="#list-categorias">
			      <div class="card card-body">
			        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			      </div>
			    </div>
			  </div>
			</div>
		</section>
<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1 Resposta 1

2

Cara fiz uma adaptação com o Acordeon e ficou muito bom ao meu ver :D, pois ele tem o funcionamento que vc deseja que é abrir Um e fechar os Outros. Dessa forma sempre terá apenas Um aberto. Inclusive como vc pode ver o Acordeon faz parte do componente Collapse oficial do Bootstrap 4 https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

Eu adaptei usando as classes do grid e removendo as classes do Card para ficar mais fácil pra vc ajustar com o seu CSS etc. Veja o exemplo como ficou.

Ele não fica totalmente preso ao ID, digo totalmente porque o próprio mecanismo do Bootstrap que vc está usando usa um atributo data-target="#collapse4" no ativador e um id="collapse4" que é o conteúdo que ele vai mostrar ou esconder. Então mesmo não tendo ID fixos, vc vai precisar usar IDs de alguma forma para o Pai com o data-target="#id" achar o Filho com o id="" entende.

EDIT

Agora adaptei para abrir todas as descrições sempre no mesmo lugar. De qualquer forma o link entre o pai e filho sempre será com o data-target/id porem o elemento com o ID pode estar em qualquer lugar dentro do acordem, então criei uma col-12 para receber esse conteúdo. Deixei comentado no HTML

#accordion {
  padding: 80px 0;
}

#accordion .categoria {
  position: relative;
  cursor: pointer;
}

#accordion .categoria h2 {
  color: #fff;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  text-align: center;
  z-index: 200;
}

#accordion .categoria img {
  filter: brightness(0.5);
  transition: all 500ms;
}

#accordion .categoria:hover img {
  filter: brightness(1);
}

#accordion .categoria .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 500ms;
  z-index: 100;
}

#accordion .categoria:hover .overlay,
#accordion .active {
  background: rgba(151, 2, 2, 0.8);
}

#accordion .categoria .divider {
  width: 70%;
  height: 0;
  display: block;
  position: absolute;
  bottom: 0;
  text-align: center;
  transition: all 500ms;
  z-index: 200;
  margin: 0 17%;
  background: #fff;
}

#accordion .categoria:hover .divider {
  height: 17px;
}

#accordion ul {
  padding: 0;
  margin: 0;
}

#accordion ul li {
  list-style: none;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
    
<div class="container"> 
  <div id="accordion" class="row">

    <!-- box com link para descrição -->
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2">grelhas argentinas</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collap">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExampl"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>

    <!-- conteúdo de cada imagem -->
    <div class="col-12">
      <div id="collapseOne" class="collapse border " aria-labelledby="headingOne" data-parent="#accordion">
        <div class="">
          1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
          craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
        </div>
      </div>
      <div id="collapse4" class="collapse border " aria-labelledby="" data-parent="#accordion">
        <div class="">
          2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupi
        </div>
      </div>
    </div>

  </div>
</div>


Opção 2 com grid individual

#accordion {padding: 80px 0;}
#accordion .categoria {position: relative;cursor: pointer;}
#accordion .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#accordion .categoria img {filter: brightness(0.5);transition: all 500ms;}
#accordion .categoria:hover img {filter: brightness(1);}
#accordion .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#accordion .categoria:hover .overlay, #accordion .active {background: rgba(151, 2, 2, 0.8);}
#accordion .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#accordion .categoria:hover .divider {height: 17px;}
#accordion ul {padding: 0;margin: 0;}
#accordion ul li {list-style: none;}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

  <div id="accordion" class="row">
    <div class="col-6 col-md-3" >
      <div class="" id="">
        <div class="categoria" id="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
        aria-controls="collapseOne">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
      <div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
        <div class="">
          1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
          craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3" >
      <div class="" id="">
        <div class="categoria" id="" data-toggle="collapse" data-target="#collapse2" aria-expanded="true"
        aria-controls="collapse2">
          <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas 2</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
      <div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
        <div class="">
          2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupi
        </div>
      </div>
    </div>
  </div>

9
  • entendo o que você fez hugo e realmente ficou muito bom. Porém o que eu quero precisa ser um pouco diferente: A ideia em si é a mesma, mas a cada categoria o accordeon deve aparecer no mesmo local. Como no exemplo: codepen.io/anon/pen/PXWePX Commented 20/12/2018 às 15:13
  • 1
    @Lucas agora ficou mais claro, vou tentar ajustar esse modelo para ver se da para salva-lo rss
    – hugocsl
    Commented 20/12/2018 às 15:23
  • 1
    @Lucas foi bem tranquilo de adaptar, nem eu acreditei que foi tão fácil rss, execute o código ai que vc vai ver que agora a descrição sempre abre no mesmo lugar para todos os itens
    – hugocsl
    Commented 20/12/2018 às 16:11
  • isso ai chefe! valeu novamente pela ajuda! sempre me ajudando!! Commented 20/12/2018 às 16:16
  • 1
    feito: pt.stackoverflow.com/questions/352459/… Commented 20/12/2018 às 23:28

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 .