Блог

Я пытаюсь применить класс к моей кнопке, чтобы при отображении переключаемого div кнопка была желтой. У меня это работает нормально, но когда я нажимаю на 2-ю кнопку (вместо того, чтобы снова переключать ту же кнопку), это вызывает проблемы.

Я скопировал в свой код jQuery ниже, мои html и css — это просто кнопки и выпадающие элементы. Я новичок в Javascript, поэтому я уверен, что это что-то относительно простое, чего мне не хватает. Какая-нибудь помощь?

Вот gif-изображение проблемы — https://gph.is/g/EGneVln

 jQuery(document).ready(function($){
  
      $(".icon1").click(function(){         // Slide down contact form //
      $("#cf-block").slideToggle(500,"linear");
      $("#nwl-block").not("#cf-block").hide();
      $(".icon1").removeClass('active');      // Highlight contact icon //
      if ($("#cf-block").is (':visible')) {
      $('.icon1').addClass('active');
      }
      });
  
      $(".icon2").click(function(){         // Slide down contact form //
      $("#nwl-block").slideToggle(500,"linear");
      $("#cf-block").not("#nwl-block").hide();
      $(".icon2").removeClass('active');      // Highlight contact icon //
      if ($("#nwl-block").is (':visible')) {
      $('.icon2').addClass('active');
      }
      });
  
});
 

 <div id="connectblock" class="ct-div-block">
  <h1 id="headline-523-16" class="ct-headline lrg-font">Get connected</h1>
    <div id="connecticons" class="ct-div-block">
      <div id="contacticon" class="ct-div-block">
        <svg class="icon1" xmlns="http://www.w3.org/2000/svg" 
        viewBox="XXXX"/></svg>
      </div>
      <div id="newslettericon" class="ct-div-block">
        <svg class="icon2" xmlns="http://www.w3.org/2000/svg" 
        viewBox="XXXX"/></svg>
      </div>
      <div id="instagramicon" class="ct-div-block">
        <a href="https://www.instagram.com/hausseuk/" target="_blank">
          <svg class="icon2" xmlns="http://www.w3.org/2000/svg" 
          viewBox="XXXX"/></svg>
        </a>
      </div>
    </div>
</div>
 

 .icon1{
  width:150px;
  height:150px;
  stroke:#000;
}
.icon2{
  width:150px;
  height:150px;
  stroke:#000;
}
.active{
  stroke:#FFD66E;
}