Toggle Icons in Akkordeon beim Klicken auf Header

Question

Ich habe eine Fußzeile mit Links, die in der mobilen Ansicht, die Links sind ausgeblendet.

Wenn der Benutzer einen Header klickt, sollten die Links wechseln nach unten, und das Symbol neben dem Header sollte von einem Plus auf Minus-Symbol ändern. Wie hier zu sehen, funktioniert das nicht.

Wenn der Benutzer wieder den erweiterten Header klickt, bricht der Abschnitt und das Symbol sollte auf ein Pluszeichen zurück.

HTML

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

jQuery

$('.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'); 
}); 

CSS

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

Answer 1

Sie können es, indem Sie die folg wechseln machen Grund:

//When the user clicks on the header/or any other div where you want to display toggle data 
$('IdOfTheDivInHeader').click(function(){ 
$('IdOfTheDivYouWantToDisplayOnToggle').toggle(); 
}); 

Sie auch mehr über die jquery .toggle() Methode lesen

Hoffnung, das Ihnen hilft!

Answer 2

Fest Code der Klasse, die Sie zuerst hinzufügen möchten, dann wie nur tun zwei toggleClass Anrufe so:

$('.collapse').on('shown.bs.collapse', function() { 
    $(this).parent().find('.zmdi-minus').toggleClass('zmdi-plus').toggleClass('zmdi-minus'); 
}).on('hidden.bs.collapse', function() { 
    $(this).parent().find('.zmdi-plus').toggleClass('zmdi-plus').toggleClass('zmdi-minus'); 
}); 

https://jsfiddle.net/damo_s/nt4q2q29/

Edit:

(Basierend auf Ihren Kommentar), können wir es auch viel einfacher machen:

$('.accordion-toggle').on('click', function() { 
    $(this).find('.zmdi').toggleClass('zmdi-plus').toggleClass('zmdi-minus'); 
}); 

https://jsfiddle.net/damo_s/nt4q2q29/3/

Edit 2:

-Material Icons scheint Sie benötigen das Symbol zwischen den Tags und nicht als eine Klasse zu platzieren, also habe ich den Code ein wenig mit jQuery geändert html(), und prüfen Sie, ob die hartcodierte Klasse, die ich dem Markup hinzugefügt habe, add in diesem Fall, nach der wir suchen, und dann Inhalt bedingt hinzufügen. Schließlich wechseln wir die Klasse:

$('.accordion-toggle').on('click', function() { 
    var $icon = $(this).find('.material-icons'); 

    if ($icon.hasClass('add')) { 
     $icon.html(''); 
    } else { 
     $icon.html(''); 
    } 

    $icon.toggleClass('add'); 
}); 

https://jsfiddle.net/damo_s/h2r83ps9/