Toggle icons in accordion when clicking header
<p>I have a footer with links, that when in mobile view, the links are hidden.
<a href="https://i.stack.imgur.com/VuApI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VuApI.png" alt="enter image description here"></a></p>

<p>When the user clicks a header, the links should toggle down, and the icon next to the header should change from a plus to minus icon. As seen here, that isn't working.</p>

<p><a href="https://i.stack.imgur.com/GACy2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GACy2.png" alt="enter image description here"></a></p>

<p>When the user clicks the expanded header again, the section collapses and the icon should return to a plus sign.</p>

<p><strong>HTML</strong></p>

<pre><code>  &lt;div class="row"&gt;
  &lt;div class="col-lg-12"&gt;
    &lt;div class="footer-links"&gt;
    &lt;div class="row"&gt;
      &lt;div class="panel-heading panel-columns panel"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-target="#about" data-parent="#accordion"&gt;
            Header
          &lt;/a&gt;
        &lt;/h4&gt;
        &lt;ul class="visible-sm visible-md visible-lg collapse" id="about"&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="panel-heading panel-columns panel"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-target="#why" data-parent="#accordion"&gt;
            Header
          &lt;/a&gt;
        &lt;/h4&gt;
        &lt;ul class="visible-sm visible-md visible-lg collapse" id="why"&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="panel-heading panel-columns panel"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-target="#quicklinks" data-parent="#accordion"&gt;
            Header
          &lt;/a&gt;
        &lt;/h4&gt;
        &lt;ul class="visible-sm visible-md visible-lg collapse" id="quicklinks"&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer-offer-columns"&gt;
        &lt;h4 class="deal-text"&gt;&lt;strong&gt;Ad text will&lt;/strong&gt; go here&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="footer-share-columns"&gt;
        &lt;div class="footer-share"&gt;
          &lt;a href=""&gt;&lt;img src="/img/facebook_icon.png"&gt;&lt;/a&gt;
          &lt;a href=""&gt;&lt;img src="/img/twitter_icon.png"&gt;&lt;/a&gt;
          &lt;a href=""&gt;&lt;img src="/img/linkedin_icon.png"&gt;&lt;/a&gt;
          &lt;a href=""&gt;&lt;img src="/img/youtube_icon.png"&gt;&lt;/a&gt;
          &lt;a href=""&gt;&lt;img src="/img/google_icon.png"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$('.panel-heading').on('click', '.accordion-toggle', function (){
$(".accordion-toggle").each(function(){
  console.log($("this"));
  $(this).removeClass('visibility-status');
  console.log('open');
});

$(this).toggleClass('visibility-status');
});
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.accordion-toggle:after {
  content: '\E145';
  font-family: 'Material Icons';
}
.accordion-toggle.visibility-status:after {
  content: '\E15B';
  font-family: 'Material Icons';
}
</code></pre>