Javascript Jquery页面上的多个手风琴

我创建了自己的基于jquery的手风琴。它利用“data”属性来触发正确的hide/show div。一切正常，但我想扩展它，以便在一个页面上有多个实例时，每个手风琴集都可以打开一张幻灯片。现在，手风琴的任何/所有实例只能打开一个幻灯片

如何使单击操作特定于父元素.container

请参考我的CodePen示例了解更多代码

标记：

---

通常，在初始化变量时需要更加具体：

$('.contain').each(function() {
    var contain = $(this),
        trigger = $(this).find(".a-trigger"),
        arrow   = $(this).find(".a-trigger-arrow"),
        content = $(this).find(".a-content");
    ...

    $(trigger).click(function () { ... }
});

---

谢谢你的帮助。我能够以此为基础来解决我的问题。我意识到我的if/else声明也必须更加具体。再次感谢！

var contain = $('.contain'),
trigger = $(".a-trigger"),
arrow = $(".a-trigger-arrow"),
content = $(".a-content");

contain.each(function(i){
  i = i+1;
  $(this).addClass('c-' + i);
});
trigger.each(function(i){
  i = i+1;
  $(this).attr('data-target', 'a' + i);
});
content.each(function(i){
  i = i+1;
  $(this).addClass('a' + i);
});


$(trigger).click(function () {
  //e.stopPropagation();
  var $target = $('.' + $(this).data('target'));

  $(this).addClass('active').find(arrow).addClass('open');
  trigger.not($(this)).removeClass('active').find(arrow).removeClass('open');
  $target.stop().delay(300).slideDown();

  if ($target.is(':visible')) {
    $(this).removeClass('active').find(arrow).removeClass('open');
    $target.stop().slideUp();
  } else {
    $('.a-content:visible').not($(this)).stop().slideUp();
  }
});

$('.contain').each(function() {
    var contain = $(this),
        trigger = $(this).find(".a-trigger"),
        arrow   = $(this).find(".a-trigger-arrow"),
        content = $(this).find(".a-content");
    ...

    $(trigger).click(function () { ... }
});