Кролик ToggleClass не работает должным образом

Question

У меня есть галерея изображений, для которой я хотел бы иметь возможность щелкнуть на маленьком «плюсе» в правом нижнем углу изображения, чтобы отобразить текст на изображении. Я также хочу, чтобы текст исчезал при нажатии на другое изображение. Если я нажимаю на «+», текст отображается по желанию. Если я нажимаю на другое изображение, оно исчезает, так что все в порядке. Однако моя проблема в том, что я не могу показать текст, а затем скрыть его, нажав на «+» того же изображения. У вас есть идеи, чтобы решить эту ошибку? Заранее спасибо за ваши огни

$(".more").click(function(){			  
				$('.fermer').not(this).removeClass('fermer');
				$('.apparait').not(this).removeClass('apparait');
				$(this).toggleClass ('fermer');
				$(this).next(".infos").toggleClass('apparait');
			});

.more {position: absolute; font-size:35px; color:white;	bottom: 5px;	right: 40px;	z-index: 10;cursor: pointer;}
.more.fermer {transform: rotate(+45deg); color:black}
.infos {opacity:0;width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0; background-color: rgba(255,255,255,0.95);-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; pointer-events:none; padding: 20px; z-index: 9;}
.infos.apparait{opacity:1!important;transition: all .5s; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">  
    <div class="col-sm-4 ">
          <img src="http://placerabbit.com/200/200/" width="200" height="200" alt="" class="open"/>
		  <div class="more">+</div>
		  <div class="infos">
			<h3>Title</h3>
			<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
      </div>
    </div>
    
     <div class="col-sm-4 ">
          <img src="http://placerabbit.com/200/200/" width="200" height="200" alt="" class="open"/>
		  <div class="more">+</div>
		  <div class="infos">
			<h3>Title</h3>
			<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
      </div>
    </div>
    
        <div class="col-sm-4 ">
          <img src="http://placerabbit.com/200/200/" width="200" height="200" alt="" class="open"/>
		  <div class="more">+</div>
		  <div class="infos">
			<h3>Title</h3>
			<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> 
      </div>
    </div>
    
    </div>
     </div>

Answer 1

По сути, вы хотите, чтобы кнопка more имела переключаемый класс fermer, а также следующий элемент, поэтому я думаю, что делать это в одиночку должно быть хорошо:

$(".more").click(function(){
    //To clean the classes
    $(".more").not(this).removeClass('fermer');     
    $(".more").not(this).next().removeClass('apparait');

    $(this).toggleClass('fermer');
    $(this).next(".infos").toggleClass('apparait');
});

То есть использует ваш код, иначе лучше подход может быть что-то вроде:

$('.more').click(function(){
    //To clean the classes
    $('.more').not(this).removeClass('fermer').next().removeClass('apparait');
    $(this).toggleClass('fermer').next().toggleClass('apparait');
});