再次单击头部时关闭手风琴

Question

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

Answer 1

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.