Javascript 展开并关闭手风琴引导程序

你好，我在手风琴中挣扎，这里是我的代码，请大家照亮我

    <div id="tg-accordion" class="tg-accordion">
   <div class="tg-panel">
      <h4 class="active">Why is accreditation important</h4>
      <div class="tg-panelcontent" style="display: block;">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4 style="margin-bottom: 10px!important;">European Regulation 765/ 2008</h4>
      <div class="tg-panelcontent" style="display: none;">
         <div class="tg-jobdescription">
            <div class="tg-description" style="margin-bottom: 10px!important;">
               <p>description</p>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4>Recognition of certifications. How accreditation provides recognition</h4>
      <div class="tg-panelcontent" style="display: none;">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div> 

---

如果您已经包含了引导脚本，那么就不需要额外的脚本来实现您想要的行为。请查看此示例，该示例可在上获得

这样，在

带数据目标的按钮

动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。

你不需要任何东西。只需确保指向CSS的链接位于页面、脚本和页面末尾的顶部。它应该很好用

为什么认证很重要
描述
欧洲条例765/2008
描述
认证的认可。认证如何提供认可
描述

您可以简单地将

数据切换=“collapse”

与

数据目标=“#idOfYourElement”

一起添加到标题上，以触发折叠。并将目标元素上的

显示：无

替换为

折叠

类：

工作示例：

为什么认证很重要
描述

欧洲条例765/2008
描述

认证的认可。认证如何提供认可
描述

谢谢，但我已经完成了这项工作，我只想修改这项工作，使其正常工作。

        $(function() {
            $('.tg-panelcontent').hide();
            // $('#tg-accordion h4:first').addClass('active').next().slideDown('slow');
            $('#tg-accordion h4').click(function() {
                if($(this).next().is(':hidden')) {
                    $('#tg-accordion h4').removeClass('active').next().slideUp('slow');
                    $(this).toggleClass('active').next().slideDown('slow');
                }
            });
        }); 

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>