Все строки аккордеона, открывающиеся сразу, как исправить?

Question

На этой странице используется аккордеон, содержащий элемент с богатым текстом внутри. JS используется для переключения активного класса, который изменяет значение максимальной высоты на нем, показывая абстрактный контент внутри.

У меня была проблема, когда гиперссылки не работали внутри, потому что значение максимальной высоты мешало; заставляя аккордеон открывать/закрывать снова, вместо того, чтобы иметь возможность нацеливать текст (попробовал использовать z-index, но, похоже, это не трюк).

Я вернулся в файл JS и CSS, чтобы нацелить заголовок аккордеона как отдельный класс. Это решило проблему с гиперссылками, но теперь, когда я нажимаю на один из аккордеонов, все они открываются сразу, чего раньше не было.

Image

Разметка

<div class="accordion-row"> 
@foreach (var item in Model.Items) { 
    <div class="teaser"> 
    <div class="teaser-title"> 
     @item.GetValue("title") 
    </div> 
     <div class="abstract"> 
      @Html.Raw(item.GetValue("content")) 
     </div> 
    </div> 
} 

Script

var pullTeaser = $('.teaser-title'); 
    menuTeaser = $('.abstract'); 

$(pullTeaser).on('click', function(e) { 
     e.preventDefault(); 
     menuTeaser.toggleClass('slide'); 
     $(this).parent().toggleClass('active'); 
    }); 

Answer 1

попробовать этот

var pullTeaser = $('.teaser-title'); 
    menuTeaser = $('.abstract'); 

$(pullTeaser).on('click', function(e) { 
     e.preventDefault(); 
     $(this).parent().find(menuTeaser).toggleClass('slide'); 
     $(this).parent().toggleClass('active'); 
    });