アコーディオンメニューにもう1つのタブを追加する、ブートストラップ

Question

私はアコーディオンメニューhttps://s.bootsnipp.com/iframe/VgZbに1つのブーストラップスニペットを使用します。私はこのページからコードを抽出しましたが、メニュー用にもう1つのタブを追加したいのですが、できません。私はdiv選択をコピーし、id collapseFiveでdivを作ろうとしましたが、動作しませんでした。助ける誰か？ありがとう。

<div class="container"><br> 
<div class="row"> 
    <div class="col-sm-3 col-md-3"> 
     <div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close"> 
         </span>Clients</a> 
        </h4> 
       </div> 
       <div id="collapseOne" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
         <table class="table"> 
          <tr> 
           <td> 
            <span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Create clients</a> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">View clients</a> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th"> 
         </span>Campaigns</a> 
        </h4> 
       </div> 
       <div id="collapseTwo" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         <table class="table"> 
          <tr> 
           <td> 
            <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <a href="http://www.jquery2dotnet.com">Invoices</a> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <a href="http://www.jquery2dotnet.com">Shipments</a> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <a href="http://www.jquery2dotnet.com">Tex</a> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user"> 
         </span>Statistics</a> 
        </h4> 
       </div> 
       <div id="collapseThree" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         <table class="table"> 
          <tr> 
           <td> 
            <a href="http://www.jquery2dotnet.com">Change Password</a> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <a href="http://www.jquery2dotnet.com">Import/Export</a> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger"> 
             Delete Account</a> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file"> 
         </span>Account</a> 
        </h4> 
       </div> 
       <div id="collapseFour" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         <table class="table"> 
          <tr> 
           <td> 
            <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Change password</a> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Notifications</a> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </div> 
       <div id="collapseFive" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         <table class="table"> 
          <tr> 
           <td> 
            <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Change password</a> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Notifications</a> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </div> 
       <?php 
        if ($_SESSION["userStatus"] == "superadmin") { 
         echo '<div id="collapseFour" class="panel-collapse collapse"><div class="panel-body"><table class="table">'; 
         echo '<tr><td><span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Change password</a>'; 
         echo '</td></tr><tr><td><span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Notifications</a>'; 
         echo '</td></tr></table></div></div>'; 
        } 
       ?> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたが別のペインを追加しようとしている場合は、このコードの焦点たいでしょう：

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"> 
     <span class="glyphicon glyphicon-th"></span> 
      Campaigns 
     </a> 
    </h4> 
    </div> 
    <div id="collapseFive" class="panel-collapse collapse"> 
    <div class="panel-body"> 
     Content 
    </div> 
    </div> 
</div> 

変更を第二のdivに必要な変更を反映するためにpanel-titleでhref="#"パネル上に表示されます。だから私の例ではpanel-collapseはid="collapseFive"であり、この場合panel-heading aタグをhref="#collapseFive"に更新しました。

あなたが求めていたことをうまく理解していただきたいと思います。