SlideToggle :visible - 多个切换的问题

如何解决SlideToggle :visible - 多个切换的问题

我正在尝试将一个类应用于我的按钮，以便在显示切换的 div 时，按钮为黄色。我让它工作正常，但是当我点击第二个按钮（而不是再次切换同一个按钮）时，它会导致问题。

我复制了下面的 JQuery 代码，我的 html 和 css 只是按钮和下拉元素。我是 Javascript 的新手，所以我确定这是我缺少的相对简单的东西。有什么帮助吗？

这是问题的 gif - https://gph.is/g/EGneVln

fig,ax=plt.subplots(1,1,figsize=(15,8))
df.sort_values('count').plot.barh(ax=ax)
ax.grid()
ax.set_ylabel('Most common words')
ax.set_xlabel('number of Occurances')
ax.set_yticklabels([x[0]+'('+x[1]+')' for x in zip(df.index,df.eng)],ha='right')

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>