Html 如何将二层手风琴变成三层手风琴

我试图把一个2层的手风琴变成一个3层的手风琴，但是这个代码非常混乱。任何协助都将不胜感激。点击第一层和第二层做了完全相同的事情，很明显，这与命名有关，但我似乎无法正确理解

<div class="m-accordion m-accordion--bordered" id="m_accordion_2" role="tablist">
    <div class="m-accordion__item">
        <div class="m-accordion__item-head" role="tab" id="m_accordion_2_item_1_head" data-toggle="collapse" href="#m_accordion_2_item_1_body" aria-expanded="true">
            <span class="m-accordion__item-icon">
                <i class="fa flaticon-user-ok"></i>
            </span>
            <span class="m-accordion__item-title">
                First Tier
            </span>
            <span class="m-accordion__item-mode"></span>
        </div>
    <div class="m-accordion__item-body collapse show" id="m_accordion_2_item_1_body" role="tabpanel" aria-labelledby="m_accordion_2_item_1_head" data-parent="#m_accordion_2" style="">
            <div class="m-accordion__item-content">
        <div class="m-accordion__item-head" role="tab" id="m_accordion_2_item_1_head" data-toggle="collapse" href="#m_accordion_2_item_1_body" aria-expanded="true">
            <span class="m-accordion__item-icon">
                <i class="fa flaticon-user-ok"></i>
            </span>
            <span class="m-accordion__item-title">
                Second Tier
            </span>
            <span class="m-accordion__item-mode"></span>
        </div>
            </div>
        </div>
        <div class="m-accordion__item-body collapse show" id="m_accordion_2_item_1_body" role="tabpanel" aria-labelledby="m_accordion_2_item_1_head" data-parent="#m_accordion_2" style="">
            <div class="m-accordion__item-content">
                <p>
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
                </p>
            </div>
        </div>
    </div>
</div>

这是仅适用于2层的原始代码：

<div class="m-accordion m-accordion--bordered" id="m_accordion_2" role="tablist">
    <div class="m-accordion__item">
        <div class="m-accordion__item-head" role="tab" id="m_accordion_2_item_1_head" data-toggle="collapse" href="#m_accordion_2_item_1_body" aria-expanded="true">
            <span class="m-accordion__item-icon">
                <i class="fa flaticon-user-ok"></i>
            </span>
            <span class="m-accordion__item-title">
                When an unknown printer took
            </span>
            <span class="m-accordion__item-mode"></span>
        </div>
        <div class="m-accordion__item-body collapse show" id="m_accordion_2_item_1_body" role="tabpanel" aria-labelledby="m_accordion_2_item_1_head" data-parent="#m_accordion_2" style="">
            <div class="m-accordion__item-content">
                <p>
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
                </p>
            </div>
        </div>
    </div>
</div>

---

我知道你不打算把代码的图片放在这里，但这是将这个问题可视化的最好方法

基本上，每个可展开部分都有2个属性，需要在标题（始终可见的零件）和正文（单击标题时展开的零件）之间对齐。其他所有属性在面板之间都可以保持不变，但这两个属性需要在标题和主体之间匹配，并且它们对于每个折叠的面板都必须是唯一的

所以你可以有3个面板，它们的Id是：

面板1:id=m_手风琴_2_项目_1_主体

面板2:id=m_手风琴_2_项目_2_主体

面板3:id=m_手风琴_2_项目_3_主体

仔细阅读引导文档，因为您正在使用数据属性来控制它。

---

您的意思是将大部分代码包装到第2行吗？如果不是，那么底部的代码太多了——不确定这是否解决了任何问题，尽管我已经更新了我的原始问题，以显示原始的两层代码，如果有帮助的话。我希望第一个头包含第二个头和第二个头内的身体。