查看“折叠面板”的源代码

==== 折叠面板 ====

<syntaxhighlight lang="html">
<div class="panel-group">
  <div class="panel-info">
    <div class="panel-heading">测试标题1111</div>
    <div class="mw-collapsible mw-made-collapsible">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
  <div class="panel-info">
    <div class="panel-heading">测试标题2222</div>
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
  <div class="panel-info">
    <div class="panel-heading">测试标题3333</div>
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
</div>
{{#css:
.panel-group { margin-bottom: 20px }  
.panel-info { position: relative;  margin-bottom: 2px; font-size: 14px; }
.panel-heading { padding: 10px 20px; font-weight: bold; color: #915d2e; background: #dfcdad;  }
.panel-body{ color: #666; background: #fbf9f1; padding: 10px 20px; }
.panel-body p{ line-height: 1.6;}
.panel-info .mw-collapsible-text:hover{ text-decoration: none;}
.mw-collapsible-toggle-default:before,.mw-collapsible-toggle-default:after{ display: none;}
.mw-collapsible-toggle{ position: absolute; width: 100%; left: 0;top: 0; }    
.mw-collapsible-toggle .mw-collapsible-text,.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  position: relative;
  font-size: 0;
  display: block;
  width: 100%;
  &::after{
    content: '-';
    color: #987b5d;
    font-size: 28px;
    display: block;
    text-align: right;
    padding-right: 20px;
    line-height: 1.3;
  }      
}
.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  &::after{
    content: '+';
    padding-right: 16px;
  }      
}
}}
</syntaxhighlight>


<div class="panel-group">
  <div class="panel-info">
    <div class="panel-heading">测试标题1111</div>
    <div class="mw-collapsible mw-made-collapsible">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
  <div class="panel-info">
    <div class="panel-heading">测试标题2222</div>
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
  <div class="panel-info">
    <div class="panel-heading">测试标题3333</div>
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
</div>
{{#css:
.panel-group { margin-bottom: 20px }  
.panel-info { position: relative;  margin-bottom: 2px; font-size: 14px; }
.panel-heading { padding: 10px 20px; font-weight: bold; color: #915d2e; background: #dfcdad;  }
.panel-body{ color: #666; background: #fbf9f1; padding: 10px 20px; }
.panel-body p{ line-height: 1.6;}
.panel-info .mw-collapsible-text:hover{ text-decoration: none;}
.mw-collapsible-toggle-default:before,.mw-collapsible-toggle-default:after{ display: none;}
.mw-collapsible-toggle{ position: absolute; width: 100%; left: 0;top: 0; }    
.mw-collapsible-toggle .mw-collapsible-text,.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  position: relative;
  font-size: 0;
  display: block;
  width: 100%;
  &::after{
    content: '-';
    color: #987b5d;
    font-size: 28px;
    display: block;
    text-align: right;
    padding-right: 20px;
    line-height: 1.3;
  }      
}
.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  &::after{
    content: '+';
    padding-right: 16px;
  }      
}
}}


<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
{{#css:
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
}}