Аккордеон открыть/закрыть все содержимое кнопки и больше

Question

У меня есть функция адаптивного аккордеона внутри веб-сайта, и я хочу (открыть) и (закрыть) весь контент одной кнопкой, которая также изменит его содержимое на (открытое), когда все содержимое закрывается и закрывается, когда все содержимое открыто.

Также теперь содержимое, которое уже было открыто, снова закрывается при использовании кнопки (открыть), а значки «плюс» и «минус» не реагируют правильно, показывая значок (минус), когда содержимое закрыто и наоборот.

Вот fiddle

Может кто-нибудь помочь мне с этим?

// Accordion // 

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

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

Answer 1

Там вы идете: 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); 
    } 
}); 

Иногда работа с переключателями может быть немного сложной и запутанной.

В этом случае я использовал «hasClass», чтобы определить, открыты ли элементы или нет. Поскольку у нас есть только «открытые» и «закрытые» состояния, мы можем сказать, что до тех пор, пока «open» не является «активным» (на нем активен класс), мы должны добавить флаг «active» класса ко всем заголовкам и содержание. то же самое в противоположной ситуации. это гарантирует, что уже переключенные элементы не будут повторно переключены.

Answer 2

Если вы отметите для класса active после возникновения тумблера, вы можете изменить текст кнопки в зависимости от того, если переключена класса активен или нет.

See this updated fiddle (отредактирован, чтобы изменить иконки также)

Answer 3

Чтобы изменить минус/плюс Icône с кнопкой, необходимо выбрать конкретный класс .header с родителем() и ребенка() метод JQuery, как это:

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