Jquery Accordion with Font Awesome Toggle

Question

I've been looking through the boards, and haven't found a solution to help with my issue at hand. I have an accordion feature that features font-awesome. I want to be able to toggle between the font awesome classes fa-angle-up/fa-angle-down when the accordion button is clicked. This is simple enough, but where I'm running into a problem is that the first div in the accordion should be open on page load, while the others are closed. The code below is allowing the divs to toggle correctly, when one opens the other closes, but the font awesome toggle isn't firing correctly. Right now when I click on a button the first div closes/font awesome toggles correctly, but the button of the div to open, and the rest of the buttons in the accordion, font awesome icon all toggle class.

I'm pretty novice with jquery, so all help is appreciated. Like I said I've looked through the boards to see if any other post related to accordions/font awesome toggles could help me, but everything I tried wasn't working, however I possibly could have been implementing it wrong since I'm not the best with jquery.

Demo here of what I currently have: http://jsbin.com/zaqocu/1/

Answer 1

Check out toggleClass() .

For example,

jquery

$('mything').click(function(){
    $(this).toggleClass('myclassOne myclassTwo');
});

So when you click, it will remove the current class you have, then add the new one. Click again and it will flip-flop.

Answer 2

Using your jsbin example. I just cleared the classes. I'm not a fan of using toggles, though I'm sure they'd work this way. Basically, any time you click on a headline, default ALL of the arrows to down, then if you are showing a headline, switch that class to up.

Here's the bin: http://jsbin.com/xuzorokaho/1/

I believe if I used toggle for this, it would toggle all arrows up or down depending on their last state, which could be down and supposed to stay down.

$(document).ready(function(){
    $(".accordion-toggle").click(function() {
        $(".accordion-toggle i").removeClass('fa-angle-up');
        $(".accordion-toggle i").addClass('fa-angle-down');
        if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
        } else {
            $(this).find('i').removeClass('fa-angle-down')
            $(this).find('i').addClass('fa-angle-up');
            $(".accordion-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
        }
    });
});

Answer 3

here is a working code :

$(document).ready(function(){
$(".accordion-toggle").click(function() {


      if($(this).next("div").is(":visible")){
        $(this).next("div").slideUp("slow");
        $(this).children().toggleClass("fa-angle-up fa-angle-down");
      } else {
        $(".accordion-toggle").next("div").slideUp("slow");
        $(".accordion-toggle i").attr("class", "fa fa-angle-down");
        $(this).next("div").slideDown("slow");
        $(this).children().toggleClass("fa-angle-up fa-angle-down");
      }
});
});

You need to close all the tab before open the one who is clicked.

Have a good one.

http://jsbin.com/cizoziqiji/2/