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>