jQuery Accordion change font awesome icon class on click

Question

I have a question about a simple jQuery accordion I found.

I'd like to use Font Awesome icons to indicate the active/inactive state with plus and minus icons. In my JSFiddle you see the accordion titles with plus icons. When you click on a title the "fa-plus" class needs to change to "fa-minus".

I already did some tests with add and removeClass, but I couldn't get it working. I'm really a jQuery/javascript noob! Hope you guys can help me out :-).

jQuery('.accordion dt').click(function() {

    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }
});

jQuery('.accordion_content').hide();

http://jsfiddle.net/XrGU8/

Solution 1

Why not chain your code instead of repeat yourself:

jQuery('.accordion dt').click(function() {
    jQuery(this).find('i').toggleClass('fa-plus fa-minus')
                .closest('dt').next().slideToggle()
                .siblings('.accordion_content').slideUp();
});

jQuery('.accordion_content').hide();

Updated Fiddle

---

Update:

Your final code should look like this:

jQuery('.accordion dt').click(function() {
    jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
           .closest('dt').siblings('dt')
           .removeClass('active').find('i')
           .removeClass('fa-minus').addClass('fa-plus');

    jQuery(this).next('.accordion_content').slideToggle()
                .siblings('.accordion_content').slideUp();  
});

jQuery('.accordion_content').hide();

Updated Fiddle

Solution 2

jQuery('.accordion dt').click(function() {
    $(this).find('i').toggleClass('fa-plus fa-minus') // add this line
    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }

});

jQuery('.accordion_content').hide();

Demo

---

jQuery('.accordion dt').click(function() {
    $('.accordion dt').find('i').removeClass('fa-minus'); // Hides the minus sign on click
    $(this).find('i').addClass('fa-plus fa-minus'); // add this line
    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }

});

jQuery('.accordion_content').hide();

Demo removes minus sign when other tabs are clicked

Solution 3

This is a good solution but when using the first tab opened it gets a little messy. But you can make this work only using css. I'm using bootstrap accordion and font awesome and i created custom icon with it so when the tab is closed it gets the closed icon and when it is opened it get the other icon. here is the html code:

<div class="accordion-group">
 <div class="accordion-heading">
   <a class="accordion-toggle accordion-icon-arrow-circle" href="#collapseOne" data-   toggle="collapse" data-parent="#accordion2">
    <span class="accordion-icon"></span> 
   Accordion Title
   </a>
 </div>
 <div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">Here will be the accordion text</div>
 </div>
</div>

and down here is the css style:

.accordion-icon-arrow-circle {
   position:relative
}

.accordion-icon {
  position: absolute;
  left: 7px;
  top: 7px;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 21px;
  text-align: center;
  font-size: 14px;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
.accordion-icon-arrow-circle .accordion-icon:before { 
  content: "\f0ab"; 
}
.accordion-icon-arrow-circle.collapsed .accordion-icon:before { 
  content: "\f0a9"; 
}

i used to add extra class .accordion-icon-arrow-circle to accorion title and the .collapsed class is called by bootstrap.js when the accordion title is clicked.

Comments

[Patrick Heiloo]

@dcodesmitch I updated my fiddle with your code, but look what happens with the other ones when you click on another title.

[Josh Powell]

@PatrickHeiloo I updated his answer with code to accommodate for that.

[Patrick Heiloo]

@JoshPowell awesome! Thats what I looked for. Thanks for your quick help!

[Josh Powell]

No problem mate, best of luck!

[dcodesmith]

Cheers @JoshPowell ;)

[Patrick Heiloo]

@JoshPowell The minus sign will be removed when other tab is clicked. But when you click on the same active tab the minus sign won't be replaced by a plus.

[Patrick Heiloo]

+1 for simplifing it indeed! But when you click on a inactive tab the minus icon needs to reset to plus and the new active one needs to be minus. Sorry for my poor English, i'm Dutch.

[Patrick Heiloo]

@Felix yes you are almost there! When you click on a active tab it will close, but the active class on the title won't be removed (it stays active).

[Felix]

@PatrickHeiloo I don't get what you means, can you elaborate a bit more? I cannot see any active class remain after closing the tab.

[Felix]

@PatrickHeiloo Are you sure that you're opening the correct fiddle demo?

[Patrick Heiloo]

@Felix if you click on a title, the title gets the class active and the icon changes to minus. When you click on that same title, the active class won't be removed.

[Yevgeniy Afanasyev]

Thanks, can you please make it collapsed by default?

[Yevgeniy Afanasyev]

I figured out how to make it collapsed by default, you need to add "collapsed" class to the same element that holds "accordion-icon-arrow-circle"/