3

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/

dcodesmith
  • 9,590
  • 4
  • 36
  • 40
Patrick Heiloo
  • 45
  • 1
  • 1
  • 7

3 Answers3

9

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

Felix
  • 37,892
  • 8
  • 43
  • 55
  • +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 Jan 16 '14 at 16:19
  • @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). – Patrick Heiloo Jan 16 '14 at 16:46
  • @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 Jan 16 '14 at 16:49
  • @PatrickHeiloo Are you sure that you're opening the correct fiddle demo? – Felix Jan 16 '14 at 16:53
  • @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. – Patrick Heiloo Jan 16 '14 at 16:55
3
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

Josh Powell
  • 6,219
  • 5
  • 31
  • 59
dcodesmith
  • 9,590
  • 4
  • 36
  • 40
2

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.

emilushi
  • 280
  • 7
  • 16