Quando clicado na categoria adiciono a classe "active". Quando clicar em outra categoria remover a classe da categoria anterior e adicionar na clicada. Até aí tudo bem. Questão é fazer a mesma forma quando clicado no título. (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>