Conflict between click, mouseenter and toggleclass, remove background colour onclick

Question

This is how my code works:

1. This is how it looks like originally.

2. After click the first thumbnail image (show in red box), the blue colour background is activated.

3. When click the 2nd thumbnail image (show in red box), the blue colour background is activated also.

4. My problem is here. When I click the same image to close the expander, the blue colour background is still showing there. I want remove it when expander is closed.

This is part of my code, my code is too long. I just took the simplified part. I think my jQuery has some issues, but I'm not sure how to change it, hoping that some of you could provide me with some advice. Thanks!

$(document).ready(function() {
	$('.thumbnail').mouseenter(function(e) {
		$(this).children('span').children('span').removeClass('title');
		$(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500);
	}).mouseleave(function(e) {
		$(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200);
		$(this).children('span').children('span').addClass('title');  //click and just remove title
	});

	$(".thumbnail").click(function(){ 
		$(".thumbnail").children('span').children('span').removeClass("background-active"); 
		$(this).children('span').children('span').toggleClass('background-active');    	
	});
});

.gallery-item {
  text-align: left;
  font-size: 25px;
  margin: 0 10px;
  padding: 10px 0;
}

.gallery-item .thumbnail img {
  display: block;
  width: 50%;
  height: auto;
}

.gallery-contents { position: relative; }

.gallery-item .title {
	position:absolute; 
	bottom:0px; 
	left:0px;
	width:50%;
	background-color:#5ba4ee;
	color:#fff;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 10px;
}


.dark-background, .background-active {
	background-color: rgba(112, 158, 202, 0.8);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	height: 50%;
	padding-top: 30%;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 50%;
	z-index: 100;
	text-transform: uppercase;
}

.background-active.title {
	background-color: rgba(112, 158, 202, 0.8);
	padding-top: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-item">
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
</div>

Answer 1

Try this..

$(document).ready(function() {
	$('.thumbnail').mouseenter(function(e) {
		$(this).children('span').children('span').removeClass('title');
		$(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500);
	}).mouseleave(function(e) {
		$(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200);
		$(this).children('span').children('span').addClass('title');  //click and just remove title
	});

	$(".thumbnail").click(function(){ 
	  	$(".thumbnail").not(this).children('span').children('span').removeClass("background-active");  
		$(this).children('span').children('span').toggleClass('background-active'); 	
	});
});

.gallery-item {
  text-align: left;
  font-size: 25px;
  margin: 0 10px;
  padding: 10px 0;
}

.gallery-item .thumbnail img {
  display: block;
  width: 50%;
  height: auto;
}

.gallery-contents { position: relative; }

.gallery-item .title {
	position:absolute; 
	bottom:0px; 
	left:0px;
	width:50%;
	background-color:#5ba4ee;
	color:#fff;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 10px;
}


.dark-background, .background-active {
	background-color: rgba(112, 158, 202, 0.8);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	height: 50%;
	padding-top: 30%;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 50%;
	z-index: 100;
	text-transform: uppercase;
}

.background-active.title {
	background-color: rgba(112, 158, 202, 0.8);
	padding-top: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-item">
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
</div>

Just use .not(this) to exclude it from removing the background-active.