ブートストラップに画像を挿入すると崩壊機能が破綻する

Question

ブートストラップアコーディオンに画像を挿入しようとしているときに、アコーディオンのそのセクション（第2アコーディオンセクション）を開いたままにする - 最初は折りたたむ必要がある誰かがそれをクリックしてそれを展開する。

これを引き起こしているコードで何が壊れているのかわかりません。あなたはライブラリを台無しhttps://jsfiddle.net/penrysh/1fLfx04m/3/#&togetherjs=dJTKolqwum

<p><strong>Complete the sections below to upload content.</strong></p> 
<div class="container" style="width: 90%;"> 
<div id="accordionCO0137098" class="panel-group" style="width: 90%;"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_0" data-toggle="collapse" data-parent="#accordionCO0137098">Access System</a></h4> 
</div> 
<div id="collapseCO0137098_0" class="panel-collapse collapse"> 
<div class="panel-body"><ol> 
<li>Click the <strong>User Name </strong>field</li> 
<li>Type your ID</li> 
<li>Click the <strong>Password </strong>field</li> 
<li>Type your password</li> 
<li>Click the <strong>Log In </strong>button</li> 
</ol></div> 
</div> 
</div> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_1" data-toggle="collapse" data-parent="#accordionCO0137098">Add a New Content</a></h4> 
</div> 
<div class="panel-body"><ol> 
<li>Click the <strong>Content </strong>tab at the top left of the screen<br /><a class="largeimage img-view" href="images/content.png" target="_blank"><img style="width: 248px; height: 71px;" src="images/content.png" alt="" width="225" height="56" border="0" /></a></li> 
<li></li> 
</ol></div> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_2" data-toggle="collapse" data-parent="#accordionCO0137098">Complete the Required Fields</a></h4> 
</div> 
<div id="collapseCO0137098_2" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_3" data-toggle="collapse" data-parent="#accordionCO0137098">Upload the Content</a></h4> 
</div> 
<div id="collapseCO0137098_3" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_4" data-toggle="collapse" data-parent="#accordionCO0137098">Tag the Content</a></h4> 
</div> 
<div id="collapseCO0137098_4" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_5" data-toggle="collapse" data-parent="#accordionCO0137098">Add Any Relevant Keywords</a></h4> 
</div> 
<div id="collapseCO0137098_5" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_6" data-toggle="collapse" data-parent="#accordionCO0137098">Add Folders</a></h4> 
</div> 
<div id="collapseCO0137098_6" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_7" data-toggle="collapse" data-parent="#accordionCO0137098">Add Any Relevant Search</a></h4> 
</div> 
<div id="collapseCO0137098_7" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_8" data-toggle="collapse" data-parent="#accordionCO0137098">Add Any Relevant Related Content</a></h4> 
</div> 
<div id="collapseCO0137098_8" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h4 class="panel-title"><a href="#collapseCO0137098_9" data-toggle="collapse" data-parent="#accordionCO0137098">Send For Review</a></h4> 
</div> 
<div id="collapseCO0137098_9" class="panel-collapse collapse"> 
<div class="panel-body"> 
<p>Note: You may type a note here.</p> 
</div> 
</div> 
</div> 
</div> 
</div> 

Answer 1

： はここJSfiddle内のコードへのリンクです。

また、 "パネル・タイル" の後に... "新しいコンテンツオブジェクトを追加" それが

<div id="collapseCO0137098_1" class="panel-collapse collapse"> 

そして、

`<div class="panel-heading">` 

前にそれが

が必要ですが必須です

<div class="panel panel-default">

新しいjsFiddleが利用可能ですhere。

スニペット：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<p><strong>Complete the sections below to upload content in the LT&amp;I CMS.</strong></p> 
 

 
<div class="container" style="width: 90%;"> 
 
    <div id="accordionCO0137098" class="panel-group" style="width: 90%;"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"><a href="#collapseCO0137098_0" data-toggle="collapse" 
 
              data-parent="#accordionCO0137098">Access the CMS</a></h4> 
 
      </div> 
 
      <div id="collapseCO0137098_0" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <ol> 
 
         <li><a href="https://klcm.antheminc.com/aries/index.cfm?" target="_blank">Click this link to 
 
          access: https://klcm.antheminc.com/aries/index.cfm?</a></li> 
 
         <li>Click the <strong>User Name </strong>field</li> 
 
         <li>Type your US Domain ID</li> 
 
         <li>Click the <strong>Password </strong>field</li> 
 
         <li>Type your US Domain password</li> 
 
         <li>Click the <strong>Log In </strong>button</li> 
 
        </ol> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- FIX: next line missing --> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"><a href="#collapseCO0137098_1" data-toggle="collapse" 
 
              data-parent="#accordionCO0137098">Add a New Content Object</a></h4> 
 
      </div> 
 
      <!-- FIX: next line missing --> 
 
      <div id="collapseCO0137098_1" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <ol> 
 
         <li>Click the <strong>Content </strong>tab at the top left of the screen<br/><a 
 
           class="largeimage img-view" href="images/content.png" target="_blank"><img 
 
           style="width: 248px; height: 71px;" src="images/content.png" alt="" width="225" 
 
           height="56" 
 
           border="0"/></a></li> 
 
         <li></li> 
 
        </ol> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"><a href="#collapseCO0137098_2" data-toggle="collapse" 
 
              data-parent="#accordionCO0137098">Complete the Required Fields On the 
 
        Properties 
 
        Panel</a></h4> 
 
      </div> 
 
      <div id="collapseCO0137098_2" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <p>Note: You may type a note here.</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"><a href="#collapseCO0137098_3" data-toggle="collapse" 
 
             data-parent="#accordionCO0137098">Upload the Content on the Content Panel</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapseCO0137098_3" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Note: You may type a note here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"><a href="#collapseCO0137098_4" data-toggle="collapse" 
 
             data-parent="#accordionCO0137098">Tag the Content Items With All Applicable 
 
       Categories</a></h4> 
 
     </div> 
 
     <div id="collapseCO0137098_4" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Note: You may type a note here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"><a href="#collapseCO0137098_5" data-toggle="collapse" 
 
             data-parent="#accordionCO0137098">Add Any Relevant Keywords</a></h4> 
 
     </div> 
 
     <div id="collapseCO0137098_5" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Note: You may type a note here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"><a href="#collapseCO0137098_6" data-toggle="collapse" 
 
             data-parent="#accordionCO0137098">Add Folders to Content Item</a></h4> 
 
     </div> 
 
     <div id="collapseCO0137098_6" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Note: You may type a note here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"><a href="#collapseCO0137098_7" data-toggle="collapse" 
 
             data-parent="#accordionCO0137098">Add Any Relevant Search Collections</a></h4> 
 
     </div> 
 
     <div id="collapseCO0137098_7" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Note: You may type a note here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"><a href="#collapseCO0137098_8" data-toggle="collapse" 
 
             data-parent="#accordionCO0137098">Add Any Relevant Related Content</a></h4> 
 
     </div> 
 
     <div id="collapseCO0137098_8" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Note: You may type a note here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"><a href="#collapseCO0137098_9" data-toggle="collapse" 
 
             data-parent="#accordionCO0137098">Send For Review</a></h4> 
 
     </div> 
 
     <div id="collapseCO0137098_9" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Note: You may type a note here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>