Show a collapse and hide the other BOOTSTRAP 4

Navigation
2

I found several answers here, but for bootstrap 3. I even tried to adapt to 4 but without success.

I'm trying to make sure that when I show a collapse it hides the other and vice versa (I can not use static id because it will have multiple categories added by the user so I'll never know the id in question). 

$(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>
    
asked by anonymous 20.12.2018 / 14:50

1 answer

2

Dude, I made an adaptation with the Accordion and it was very good for me to see: D, because it has the way you want it to open One and close the Others. That way you will always have only one open. Even as you can see the Acordeon is part of the Collapse official Bootstrap 4 component link

I adapted using the grid classes and removing the Card classes to make it easier for you to adjust with your CSS etc. See the example as it was.

It does not get stuck with ID , I say totally because the Bootstrap engine you're using itself uses a data-target="#collapse4" attribute in the trigger and a id="collapse4" that is the content it will show or hide. So even though you do not have ID fixed, you will need to use IDs in some way for the Parent with data-target="#id" finding the Son with id="" understands.

EDIT

Now I have adapted to open all the descriptions in the same place. Anyway, the link between parent and child will always be with data-target/id , but the element with ID can be anywhere within the wake, so I created a col-12 to receive that content. I commented in 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><scriptsrc="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><scriptsrc="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>

Option 2 with individual grid 

#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><scriptsrc="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><scriptsrc="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>
    
20.12.2018 / 15:30
I can not remove the new item created in my Todo List - Using Vanilla ngx-bootstrap + angular 6 + datepicker