Accordion open/close all content button and more

Question

I have a responsive accordion function inside a website and i want to (open) and (close) all content with one button that also change his content name to (open) when all content is closed and (closed) when all content is open.

Also now the content that already was opened closes again when using the (open) button and the plus and minus icons don't react the right way showing the (minus icon) when the content is closed and visa versa.

Here is the fiddle

Can someone help me with this?

// Accordion //

$('.header').click(function(){
    $('.content',$(this).parent()).slideToggle();
    $(this).toggleClass('active');
})

$('.toggle-btn').click(function(){
    $('.content').slideToggle();
    $(this).toggleClass('active');
})

Answer 1

If you check for the class active after the toggle occurs, you can then change the text of the button depending on if the toggled class is active or not.

See this updated fiddle (edited to change the icons also)

Answer 2

To change your minus/plus icone with your button, you must select specific .header class with parent() and child() jQuery method like this :

$('.toggle-btn').click(function(){
    $('.content').each( function() { 
    $(this).slideToggle();
    $(this).parent().find('.header').toggleClass('active');
     });
});

Answer 3

There you go: http://jsfiddle.net/w3srayj6/21/

// Accordion //

$(document).ready(function() {

    $('.header').click(function(){
        $('.content',$(this).parent()).slideToggle();
        $(this).toggleClass('active');
         $('.toggle-btn').addClass('active').trigger("change"); 
    })

});

$(document).ready(function() {
    $('.toggle-btn').change(function(){
        var headers = $('.header');
        var state = 'open';
        $.each(headers,function(){
            if($(this).hasClass('active'))
                state = 'close';
        });
        if(state == 'open')
            $(this).addClass('active')
        $(this).text(state);
    });
    $('.toggle-btn').click(function(){
        var current = $(this);
        current.toggleClass('active');
        current.trigger("change");
        var contents = $('.content');
        $.each(contents, function(){
            if(!current.hasClass('active'))
                $(this).slideUp();
            else
                $(this).slideDown();
        });
        var headers = $('.header');
        $.each(headers, function(){
            if(current.hasClass('active'))
                $(this).addClass('active');
            else
                $(this).removeClass('active');
        });      
       current.trigger("change");
    })

});

// Read more //

$(window).scroll(function() {
    if ($(this).scrollTop() < 20) {
        $('.read-more').slideDown(200);
    } else {
        console.log('there');
        $('.read-more').slideUp(200);
    }
});

Sometimes working with toggles may be a bit tricky and confusing.

In this case I used "hasClass" in order to determine if items are already open or not. Since we have only "opened" and "closed" states, we can say that as long that "open" is not "Active" (has class active on it), we should add the "active" class flag to all headers and contents. same in the opposite situation. this makes sure that already toggled items are not re-toggled.