Skip to main content
Commonmark migration
Fonte Link

##EDIT

EDIT

##EDIT

EDIT

inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

##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;cursorrelative;
  cursor: pointer; 
} 

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

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

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

#accordion .categoria .overlay {
  width: 100%;height100%;
  height: 100%;display100%;
  display: block;positionblock;
  position: absolute;topabsolute;
  top: 0;left0;
  left: 0;transition0;
  transition: all 500ms;z500ms;
  z-index: 100; 
} 

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

#accordion .categoria .divider {
  width: 70%;height70%;
  height: 0;display0;
  display: block;positionblock;
  position: absolute;bottomabsolute;
  bottom: 0;text0;
  text-align: center;transitioncenter;
  transition: all 500ms;z500ms;
  z-index: 200;margin200;
  margin: 0 17%;background17%;
  background: #fff; 
} 

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

#accordion ul {
  padding: 0;margin0;
  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"> 

    <div class="col<!-6- colbox com link para descrição -md-3" >
    <div class=" <divcol-3">
 class="" id="">    <div class="">
        <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>
 <div id="collapseOne" class="collapse "<div aria-labelledby="headingOne"class=" datacol-parent="#accordion">3">
        <div class="">
        <div class="categoria" 1data-toggle="collapse" Animdata-target="#collapse4" pariaturaria-expanded="true" clichearia-controls="collap">
 reprehenderit, enim eiusmod high life accusamus terry richardson ad squid<img src="https://i.imgur.com/pQcVh9h.png" 3class="img-fluid">
 wolf moon
        <h2 class="title" officiadata-toggle="collapse" aute,data-target="#multiCollapseExample2" nonrole="button" cupidatataria-expanded="false"
 skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
          craft<span beerclass="overlay" farmdata-totoggle="collapse" data-table,target="#multiCollapseExample2" rawrole="button" denimaria-expanded="false"
 aesthetic synth nesciunt you probably haven't heard of them accusamus
  aria-controls="multiCollapseExampl"></span>
         labore sustainable<span VHS.class="divider"></span>
        </div>
      </div>
    </div>
  
   <div class="col<!-6- colconteúdo de cada imagem -md-3" >
      <div class="" id="">class="col-12">
      <div id="collapseOne" <divclass="collapse class="categoria"border id=""" dataaria-toggle="collapse"labelledby="headingOne" data-target="#collapse2" aria-expanded="true"parent="#accordion">
        aria-controls="collapse2"><div class="">
          <img1 src="https://i.imgur.com/pQcVh9hAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.png" class="img-fluid">3 wolf moon
          <h2officia class="title"aute, data-toggle="collapse"non data-target="#multiCollapseExample2"cupidatat role="button"skateboard aria-expanded="false"dolor aria-controls="multiCollapseExample2">grelhasbrunch. argentinasFood 2</h2>truck quinoa nesciunt vice lomo. Leggings occaecat
          <spancraft class="overlay"beer datafarm-toggle="collapse" datato-target="#multiCollapseExample2"table, role="button"raw aria-expanded="false"denim aria-controls="multiCollapseExample2"></span>aesthetic synth nesciunt you probably haven't heard of them accusamus
          <spanlabore class="divider"></span>sustainable VHS.
        </div>
      </div>
      <div id="collapse2"id="collapse4" class="collapse border " aria-labelledby="heading2"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>
#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>

##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>
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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

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.

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

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando