如何更改自定义手风琴的图标？

Question

We created a custom accordion library that will toggle the .content element based on what is clicked similar to jQuery accordion. Next to the .header element we are displaying a fontawesome plus icon . I am running into issues where the content will hide and show, but the icon will not switch.

How can i get the content element and icons to switch?

Current issue:

Desired output:

 $(function() { $('.header').on('click', function() { var hdr = $(this); var grandParents = hdr.parent().parent(); grandParents.find('.item.active').removeClass('active'); grandParents.find('.content').stop().slideUp().removeClass('active'); hdr.closest('.item').find('.content').stop().slideToggle(); hdr.parent().toggleClass('active'); }); });

 .content { display: none; }.item.active >.content { display: block; }.item.active >.header { color: white; background-color: black; }.header { padding: 16px; margin: 8px; background-color: lightgrey; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script> <div class="accordion"> <div class="item"> <h3 class="header"> <i class="fas fa-plus"></i> <span>First link</span> </h3> <div class='content'> SOME CONTENT HERE </div> </div> <div class="item"> <h3 class="header"> <i class="fas fa-plus"></i> <span>second link</span> </h3> <div class='content'> SOME CONTENT HERE </div> </div> <div class="item"> <h3 class="header"> <i class="fas fa-plus"></i> <span>third link</span> </h3> <div class='content'> Some more content </div> </div> </div>

Answer 1

I have updated your js code, please check. The general concept of my update is, in every click, the icon is removed and replaced with a new but different one (from plus to minus and vice versa).

The problem on this is that the use of fontawesome icons. But anyways, take a look on my code.

Here's the full working code. The only update I have is the js part.

 $(function() { $('.header').on('click', function() { var hdr = $(this); hdr.siblings('.content').slideToggle(); hdr.parent().toggleClass('active'); hdr.parent().siblings().find('.content').slideUp(); hdr.parent().siblings().removeClass('active'); if(hdr.parent().hasClass('active')) { hdr.parent().find('svg').remove(); hdr.parent().siblings().find('svg').remove(); hdr.prepend('<i class="fas fa-minus"></i>'); hdr.parent().siblings().find('.header').prepend('<i class="fas fa-plus"></i>'); } else { hdr.parent().find('svg').remove(); hdr.prepend('<i class="fas fa-plus"></i>'); } }); });

 .content { display: none; }.item.active >.content { display: block; }.item.active >.header { color: white; background-color: black; }.header { padding: 16px; margin: 8px; background-color: lightgrey; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script> <div class="accordion"> <div class="item"> <h3 class="header"> <i class="fas fa-plus"></i> <span>First link</span> </h3> <div class='content'> SOME CONTENT HERE </div> </div> <div class="item"> <h3 class="header"> <i class="fas fa-plus"></i> <span>second link</span> </h3> <div class='content'> SOME CONTENT HERE </div> </div> <div class="item"> <h3 class="header"> <i class="fas fa-plus"></i> <span>third link</span> </h3> <div class='content'> Some more content </div> </div> </div>

Answer 2

We had same kind of requirement, where we had to replace the + icon of each accordion item with dynamic icon specific to the accordion content, like 1st Accordion - a.png 2nd accordion - b.png and so on.

I did it by adding an image to the Accordion Item page content template and assign it to the cloned accordion rendering.