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

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

<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; right: 15px;top: 2px; }    
.mw-collapsible-toggle .mw-collapsible-text,.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  position: relative;
  font-size: 0;
  &::before{
    content: '-';
    color: #987b5d;
    font-size: 28px;
    text-align: center;
    width: 18px;
    display: inline-block;
  }      
}
.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  &::before{
    content: '+';
  }      
}
}}
</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%;
  &::before{
    content: '-';
    color: #987b5d;
    font-size: 28px;
    text-align: center;
    width: 18px;
    position: absolute;
    right: 15px;
  }      
}
.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  &::before{
    content: '+';
  }      
}
}}