Должен открываться только один дополнительный контейнер / jquery

Я работаю над веб-сайтом, который показывает галерею из 8 изображений. Если щелкнуть одно из изображений, браузер прокрутит вниз 650 пикселей, а затем откроется другой контейнер (изображение + текст с описанием). Щелчок по кнопке закрывает дополнительную информацию, и окно браузера снова перемещается вверх. Это очень хорошо работает.

Мой вопрос: Если один блок уже открыт, а пользователь открывает второй блок, класс "ausklappen" должен быть удален из первого блока, чтобы он снова стал невидимым.

Спасибо за идеи Рафаэль

Ссылка на область разработки: http://homepage-4-you.net/andersicht/

Мой HTML: Галерея:

<ul class = "wp-block-gallery columns-4 is-cropped galerie-schmal"> 
<li class = "blocks-gallery-item"><figure><img src=„example.com“ alt = "" /><figcaption>name 1 </figcaption></figure></li>
<li class = "blocks-gallery-item"><figure><img src=„example.com“ alt = "" /><figcaption>name 2 </figcaption></figure></li> 
    …
<li class = "blocks-gallery-item"><figure><img src=„example.com“ alt = "" /><figcaption>name 8 </figcaption></figure></li>
</ul>

8 дополнительных блоков:

<div class = "wp-block-media-text alignwide einzelportrait1 ausklappen“></div>
<div class = "wp-block-media-text alignwide einzelportrait2 ausklappen“></div>
…
<div class = "wp-block-media-text alignwide einzelportrait8 ausklappen“></div>

Кнопка возврата:

<div class=„einzelportrait_button“> <img src=„examle.com“ alt=„“ /></div>

Мой jQuery:

1) прокрутите вниз и (в конце концов) снова прокрутите вверх:

$(".blocks-gallery-item img").click(function(event){
    $('html, body').animate({scrollTop: '+=650px'}, 800);
});

 $(".einzelportrait_button").click(function(event){
    $('html, body').animate({scrollTop: '-=650px'}, 800);
});

2) Открытые блоки дополнительной информации

$( "ul.wp-block-gallery li:nth-child(1)" ).on( "click", function() {
      $( ".einzelportrait1" ).addClass( "ausklappen");
    });   

$( "ul.wp-block-gallery li:nth-child(2)" ).on( "click", function() {
      $( ".einzelportrait2" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(3)" ).on( "click", function() {
      $( ".einzelportrait3" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(4)" ).on( "click", function() {
      $( ".einzelportrait4" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(5)" ).on( "click", function() {
      $( ".einzelportrait5" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(6)" ).on( "click", function() {
      $( ".einzelportrait6" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(7)" ).on( "click", function() {
      $( ".einzelportrait7" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(8)" ).on( "click", function() {
      $( ".einzelportrait8" ).addClass( "ausklappen");
    });  

3) Закройте дополнительную информацию

$(".einzelportrait_button").click(function(){
        $(".einzelportrait1, .einzelportrait2, .einzelportrait3, .einzelportrait4, .einzelportrait5, .einzelportrait6, .einzelportrait7, .einzelportrait8").removeClass("ausklappen");
    });