Javascript 使用jQuery创建所提供内容的手风琴

我真的不知道JS/jQuery。我需要使用这个HTML并使用JS来转换/重新构造它，使它能够像手风琴一样工作

HTML:

标题1
这是一些内容

这是更多的内容

标题2
这是一些内容

这是更多的内容

标题3
这是一些内容

这是更多的内容

我需要将h6作为内容区域的手风琴链接和内容之间的链接。我从一个教程中收集到了这一点，但它是作为选项卡进行的，不确定如何重做，因此它的行为/结构就像手风琴：

我想应该是这样的（当然，当点击标题更改为正确内容时）：

标题1
内容1
标题2
内容2

我需要调整的JS：

var headers = $("#tab_description h6");

  $('#tab_description h6').each(function(i){      
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-'+i+'"/>');
  });

  for( var i = 0; i < headers.length; i++ ) {
    $('.tabs').append('<li class=""><a href="#tab-'+i+'">'+headers[i].innerHTML+'</a></li>');
  }

  $('ul.tabs').each(function(){
    var active, content, links = $(this).find('a');
    var listitem = $(this).find('li');
    active = listitem.first().addClass('active');
    content = $(active.attr('href'));
      $('.tab').hide();
    $(this).find('a').click(function(e){
      $('.tab').hide();
      $('ul.tabs li').removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.parent().addClass('active');
      content.show();
      return false;
    });
  });

  headers.remove(); // remove headers from description  
  $('#tab-0').show(); // show the first tab

var headers=$（“#tab#u description h6”）；
$（'#tab_description h6'）。每个（函数（i）{
$（this.nextUntil（“h6”）.andSelf（）.wrapAll（“”）；
});
对于（变量i=0；i”）；
}
$（'ul.tabs'）。每个（函数（）{
var-active，content，links=$（this.find（'a'）；
var listitem=$（this.find（'li'）；
active=listitem.first（）.addClass（'active'）；
content=$（active.attr（'href'）；
$（'.tab'）.hide（）；
$（this）。查找（'a'）。单击（函数（e）{
$（'.tab'）.hide（）；
$（'ul.tabs li'）.removeClass（'active'）；
content.hide（）；
活动=$（此）；
content=$（$（this.attr（'href'））；
active.parent（）.addClass（'active'）；
content.show（）；
返回false；
});
});
headers.remove（）；//从描述中删除标题
$（'#tab-0'）。show（）；//显示第一个选项卡

这是一个基于您的结构的手风琴的非常简单的实现。代码笔：

此实现使用jQuery

nextUntil

函数来实现所需的结果

HTML

jQuery

$('.accordion h6').click(function() {
  $(this).nextUntil('h6').toggle();
});

var accordionContent = $('.accordion p');

$('.accordion h6').click(function() {

  // Check if current accordion item is open
  var isOpen = $(this).next().is(":visible");

  // Hide all accordion items
  accordionContent.hide();

  // Open accordion item if previously closed
  if (!isOpen) {
    $(this).nextUntil('h6').show();
  }
});

如果需要动画，可以使用jQuery在段落项上切换类

更新-附加手风琴功能

以下是一个更新，强制一次只打开一个手风琴： 更新的代码笔：

jQuery

$('.accordion h6').click(function() {
  $(this).nextUntil('h6').toggle();
});

var accordionContent = $('.accordion p');

$('.accordion h6').click(function() {

  // Check if current accordion item is open
  var isOpen = $(this).next().is(":visible");

  // Hide all accordion items
  accordionContent.hide();

  // Open accordion item if previously closed
  if (!isOpen) {
    $(this).nextUntil('h6').show();
  }
});

---

你看过吗？我想这是一个人应该自己写的东西。把事情搞砸简直太简单了。我是说。。。刚开始时还没有自己写手风琴的人。问题是，我需要生成源代码，因为它来自shopify CMS，所以结构是标题内容等。。所以需要以h6为标题，以h6之间的内容为内容。。。有可能吗？谢谢你的帮助，顺便说一句，非常感谢！但我需要使用我提供的HTML示例，并根据它重新创建。。。再次感谢你，伙计！您能够将内容包装在div中吗？这将使实现更加简洁。是的，我可以将它包装在一个div中，这不是问题。你能将每个手风琴集包装在一个div中吗？比如：标题1这是一些内容

这是更多的内容

$('.accordion h6').click(function() {
  $(this).nextUntil('h6').toggle();
});

var accordionContent = $('.accordion p');

$('.accordion h6').click(function() {

  // Check if current accordion item is open
  var isOpen = $(this).next().is(":visible");

  // Hide all accordion items
  accordionContent.hide();

  // Open accordion item if previously closed
  if (!isOpen) {
    $(this).nextUntil('h6').show();
  }
});