Adding and Removing Classes

Question

Adding and Removing Classes

Navigation

#1 by (2 votes)

2

When clicked on the category I add the "active" class. When you click on another category remove the class from the previous category and add in the clicked. So far so good. Question is to do the same form when clicked on the title. (I can not use static "id" because it will have multiple 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>

jquery

asked by anonymous 20.12.2018 / 16:14

1 answer

Return javascript result with controller Reapping the HttpClient and life cycle of an ApiController

score 2 · Accepted Answer

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

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

Now, there are two more problems in your code:

One is a syntax error on these lines:

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

The first line was closed and the not down was isolated. The correct would be to remove the ; from the first line and add a period before not :

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

Another problem is that when you click on h2 (where the text "Argentine grid" is), there is a bug in which a red background is applied to h2 . To fix this I added one more code to get the span.overlay following the h2 clicked. To do this, add in the click event the .title class, verifying by the name of the tag what was clicked.

The event selector looks like this:

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

And verification:

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

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

Then everything will look 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>