Adding and removing classes

Question

When clicked in the category add the class "active". When you click another category remove the class from the previous category and add it in the clicked. So far so good. The question is to do the same way when clicked on the title. (I cannot use static "id" as there will be several categories added by the user so I will 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>

Answer 1

Add the event show.bs.collapse to hide an open title when opening another:

$('.collapse').on('show.bs.collapse', function () {
   $(".collapse.show").collapse('hide');
});

Now, there are two more problems with your code:

One is a syntax error in these lines:

$('.overlay').not(this).addClass('collapsed'); ←
→ not(active).attr('aria-expanded') === 'true';

The first line was closed and the not below was isolated. The correct would be to remove the ; of the first line and add a point before the not:

$('.overlay').not(this).addClass('collapsed')
.not(active).attr('aria-expanded') === 'true';

Another problem is that by clicking on h2 (where there is the text "Argentine grids"), there is a bug in which a red background is applied to the h2. To fix this I added another code to catch the span.overlay following of h2 clicked. For this, add in the event click the class .title, by checking the name of the tag that was clicked.

The event selector will look like this:

$('.overlay, .title').on('click', function (e) {...

And the verification:

if(e.target.tagName != "SPAN"){
  var active = $( e.currentTarget ).next();
  $this = $(this).next();
}else{
  var active = $( e.currentTarget );
  $this = $(this);
}

See that the $(this) was replaced by $this because it will be used differently in another part of the code.

Then everything will be like this:

$(function () { 

   $('.collapse').on('show.bs.collapse', function () {
      $(".collapse.show").collapse('hide');
   });

    $('.overlay, .title').on('click', function (e) {
        if(e.target.tagName != "SPAN"){
           var active = $( e.currentTarget ).next();
           $this = $(this).next();
        }else{
           var active = $( e.currentTarget );
           $this = $(this);
        }

        
            $('.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>