Как переключить только * следующий * и скрыть другой класс

0

У меня есть проблема с разворачивающимся jquery.

Мои элементы HTML подобны этому

    <div id="first" class="collapse-container">

        <h1 class="collapse">
        <span class="arrow-r"></span>First Heading</h1>
        <div class="accordion-active">
            <p>First Section</p>
            <p>First Section</p><p>First Section</p>
        </div>
        <h1 class="collapse"><span class="arrow-r"></span>Second Heading</h1>
        <div class="accordion-active">
            <p>Second Section</p>
            <p>Second Section</p>
        </div>
        <h1 class="collapse"><span class="arrow-r"></span>Third Heading</h1>
        <div class="accordion-active">
            <p>Third Section</p>
            <p>Second Section</p>
        </div>
    </div>

Я использую этот jquery для класса toggle

    $(document).ready(function () {
        $(".collapse").click(function () {
            $(this).toggleClass("active");
        });
    });

    jQuery(document).ready(function() {
      jQuery(".accordion-active").hide();
      //toggle the componenet with class msg_body
      jQuery(".collapse").click(function()
      {
        jQuery(this).next(".accordion-active").slideToggle(0);

      });
    });

Теперь моя проблема, когда я нажимаю на первый тег h1, он показывает только свои элементы. Это прекрасно. Но теперь, когда я нажимаю на тег 2 h1, он показывает свои элементы, НО FIRST H1 TAG STILL OPEN.

Как я могу скрыть все остальные, в то время как один (следующий класс) активен?

благодаря

Теги:

2 ответа

0
Лучший ответ

Попробуй это.

$(".accordion-active").hide();

//toggle the componenet with class msg_body
$(".collapse").click(function(){

  var $this = $(this); //  Cacheing $(this)

  $('.accordion-active').slideUp();

  if( !$this.next(".accordion-active").is('.open') ){
    //$('h1').removeClass('active');
    $('.accordion-active').removeClass('open');
    $this.addClass("active").siblings("h1").removeClass("active");
    $this.next(".accordion-active").addClass('open').slideDown();
  } else {
    $("h1").removeClass("active");
    $this.next(".accordion-active").removeClass('open').slideUp(); 
  }

});

Демо-версия скрипта

  • 0
    это работает, но использование этого создает другую проблему. Любая вкладка остается открытой всегда. Я не хочу так. Пожалуйста, дайте мне решение этого.
  • 0
    Я обновил свой ответ. jsfiddle.net/u3sns/5
Показать ещё 1 комментарий
0

Или вы можете просто использовать интерфейс Accordion - jQuery.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню