CODEWITHSUNDEEP
javascriptjquery
FranzSif
FranzSif

Reputation: 113

Close of the accordion when click once again in the head

I'm using jQuery to althern the open and close of a some accordions from Django Data, the data shows correctly, when I click another element the rest of accordions close, its ok, but when I click again in the same head of this accordion, this one not close just return open once again.

$(document).on('click', '.accordion-head', function (e) {

    e.preventDefault();

    var value = $(this).children().children().attr("id");
    $("#paquete").val("Paquete seleccionado: " + value);

    $('.accordion-head').children().removeClass('active');
    $('.accordion-head').children().children().children().removeClass(' iluminar');
    $('.accordion-body').slideUp();
    $('.accordion-head .pull-right').html('+');
    $(this).next().slideDown();
    $(this).children().addClass('active');
    $(this).children().children().children().addClass(' iluminar');
    $(this).children().children().children().children().html('-');
    return false;
});

I desire that when I click in the head of the open body, the body close, and the head return to first class color (just for example, the initial color was green and after then orange).

example:

jsfiddle

Upvotes: 0

Views: 127

Answers (1)

N'Bayramberdiyev
N'Bayramberdiyev

Reputation: 3620

You can check whether the accordion you clicked has class active using hasClass() method. Here is the updated code:

$(document).on('click', '.accordion-head', function (e) {
    e.preventDefault();

    var value = $(this).children().children().attr("id");
    $("#paquete").val("Paquete seleccionado: " + value);

    $(this).children('a.iluminar').toggleClass('active');
    $('.accordion-head h3').removeClass('iluminar');
    $('.accordion-head .pull-right').html('+');
    $('.accordion-body').slideUp();

    if ($(this).children('a.iluminar').hasClass('active')) {
        $(this).next().slideDown();
        $(this).find('h3').addClass('iluminar');
        $(this).find('.pull-right').html('-');
    }
});

Here is the fiddle based on your code.

I hope this works as you expect.

Upvotes: 1

Related Questions