title: This collapsable div won't collapse, but works fine on jsfiddle
body: <p>I have a popup window and inside this popup I have a collapsable div.  If I paste the code for the collapsable div into jsfiddle it works fine.  It does not work on my page.  Why would this be?  Also, the collapsable div contains a slider bar.  The slider buttons don't work either.  Maybe it's the same problem.</p>
  
  <p><a href="https://jsfiddle.net/riverbend120/Wc4xt/3720/" rel="nofollow">Here is the jsfiddle</a></p>
  
  <p>Here is my html:</p>
  
  <pre><code>        &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-8 col-md-8"&gt;
                      &lt;!-- POST --&gt;
                      {% for entry in entries %}
                          &lt;div class="panel panel-default"&gt;                        
                            &lt;div class="panel-body"&gt;
                              &lt;div class="media media-clearfix-xs-min"&gt;
                                &lt;div class="media-left"&gt;
                                  &lt;a href="lesson.html"&gt;
                                    &lt;span class="media-object icon-block bg-default"&gt;&lt;i class="fa fa-github"&gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;/a&gt;
                                &lt;/div&gt;
                                &lt;div class="media-body"&gt;
                                  &lt;h3 class="media-heading h4"&gt;&lt;a href="" class="popup-link-1"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
  
                                  &lt;p class="small text-muted"&gt;
                                    &lt;!-- &lt;i class="fa fa-clock-o fa-fw"&gt;&lt;/i&gt; time since post --&gt;
                                      &lt;div class="popup-box" id="popup-box-1"&gt;
                                          &lt;div class="close"&gt;X&lt;/div&gt;
                                              &lt;body&gt;
                                                  &lt;div id="myCarousel" class="carousel slide"&gt; &lt;!-- slider --&gt;
                                                      &lt;div class="carousel-inner"&gt;
                                                          &lt;div class="active item"&gt; &lt;!-- item 1 --&gt;
                                                              &lt;img src="http://placehold.it/940x120" alt=""&gt;
                                                          &lt;/div&gt; &lt;!-- end item --&gt;
                                                          &lt;div class="item"&gt; &lt;!-- item 2 --&gt;
                                                              &lt;img src="http://placehold.it/940x120" alt=""&gt;
                                                          &lt;/div&gt; &lt;!-- end item --&gt;
                                                          &lt;div class="item"&gt; &lt;!-- item 3 --&gt;
                                                              &lt;img src="http://placehold.it/940x120" alt=""&gt;
                                                          &lt;/div&gt; &lt;!-- end item --&gt;
                                                      &lt;/div&gt; &lt;!-- end carousel inner --&gt;
                                                      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
                                                      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
                                                  &lt;/div&gt; &lt;!-- end slider --&gt;
                                              &lt;/body&gt;       
                                              &lt;div class="top"&gt;
                                                  &lt;h2&gt;{{entry.title}}&lt;/h2&gt;
                                              &lt;/div&gt;
                                              &lt;div class="bottom"&gt;
                                                  &lt;p&gt;{{ entry.body_html | safe }}&lt;/p&gt;
                                              &lt;/div&gt;
                                              &lt;p&gt;
                                              &lt;i class="fa fa-user fa-fw"&gt;&lt;/i&gt; &lt;a href="{{ url_for('public_user_page', userID=entry.userID) }}"&gt;{{entry.user_name}}&lt;/a&gt;
                                              &lt;i class="fa fa-calendar fa-fw"&gt;&lt;/i&gt; {{entry.date_posted}} 
                                              &lt;p&gt;
                                              &lt;div class="panel-group" id="accordion"&gt;
                                                  &lt;div class="panel panel-default" id="panel1"&gt;
                                                      &lt;div class="panel-heading"&gt;
                                                           &lt;h4 class="panel-title"&gt;
                                                      &lt;a data-toggle="collapse" data-target="#collapseOne" 
                                                         href="#collapseOne"&gt;
                                                        Collapsible Group Item #1
                                                      &lt;/a&gt;
                                                    &lt;/h4&gt;
                                                      &lt;/div&gt;
                                                      &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
                                                          &lt;div class="panel-body"&gt;
                                                            Hello!!!
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;                                                
  
                                              &lt;div class="panel-group" id="accordion"&gt;
                                                  &lt;div class="panel panel-default" id="panel1"&gt;
                                                      &lt;div class="panel-heading"&gt;
                                                           &lt;h4 class="panel-title"&gt;
                                                      &lt;a data-toggle="collapse" data-target="#collapseOne" 
                                                         href="#collapseOne"&gt;
                                                        See All Entries That Cite This
                                                      &lt;/a&gt;
                                                    &lt;/h4&gt;
                                                      &lt;/div&gt;
                                                      &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
                                                          &lt;div class="panel-body"&gt;
                                                              &lt;body&gt;
                                                                  &lt;div id="myCarousel" class="carousel slide"&gt; &lt;!-- slider --&gt;
                                                                      &lt;div class="carousel-inner"&gt;
                                                                          &lt;div class="active item"&gt; &lt;!-- item 1 --&gt;
                                                                              &lt;img src="http://placehold.it/940x120" alt=""&gt;
                                                                          &lt;/div&gt; &lt;!-- end item --&gt;
                                                                          &lt;div class="item"&gt; &lt;!-- item 2 --&gt;
                                                                              &lt;img src="http://placehold.it/940x120" alt=""&gt;
                                                                          &lt;/div&gt; &lt;!-- end item --&gt;
                                                                          &lt;div class="item"&gt; &lt;!-- item 3 --&gt;
                                                                              &lt;img src="http://placehold.it/940x120" alt=""&gt;
                                                                          &lt;/div&gt; &lt;!-- end item --&gt;
                                                                      &lt;/div&gt; &lt;!-- end carousel inner --&gt;
                                                                      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
                                                                      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
                                                                  &lt;/div&gt; &lt;!-- end slider --&gt;
                                                              &lt;/body&gt;       
  
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;p&gt;
                                              &lt;p&gt;
                                              &lt;p&gt;
                                              {% if current_user.is_authenticated %}
                                                &lt;div class="container-fluid"&gt;
                                                  &lt;div class="timeline row" data-toggle="isotope"&gt;
                                                    &lt;div class="col-xs-12 col-md-12 col-lg-12 item"&gt;
                                                      &lt;div class="timeline-block"&gt;
                                                        &lt;div class="panel panel-default share clearfix-xs"&gt;
                                                          &lt;div class="panel-heading panel-heading-gray title"&gt;
                                                            &lt;textarea name="status" class="form-control share-text" rows="1" placeholder="Type Subject..."&gt;&lt;/textarea&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="panel-body"&gt;
                                                            &lt;textarea name="status" class="form-control share-text" rows="5" placeholder="Type Body..."&gt;&lt;/textarea&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="panel-footer share-buttons"&gt;
                                                            &lt;a href="#"&gt;&lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;&lt;/a&gt;
                                                            &lt;a href="#"&gt;&lt;i class="fa fa-photo"&gt;&lt;/i&gt;&lt;/a&gt;
                                                            &lt;a href="#"&gt;&lt;i class="fa fa-video-camera"&gt;&lt;/i&gt;&lt;/a&gt;
                                                            &lt;button type="submit" class="btn btn-primary btn-xs pull-right display-none" href="#"&gt;Post&lt;/button&gt;
                                                          &lt;/div&gt;
                                                        &lt;/div&gt;
                                                      &lt;/div&gt;
                                                    &lt;/div&gt;
                                                  &lt;/div&gt;
                                                &lt;/div&gt;
                                              {% endif %} 
  
                                      &lt;/div&gt;
                                    &lt;i class="fa fa-user fa-fw"&gt;&lt;/i&gt; &lt;a href="{{ url_for('public_user_page', userID=entry.userID) }}"&gt;{{entry.user_name}}&lt;/a&gt;
                                    &lt;i class="fa fa-calendar fa-fw"&gt;&lt;/i&gt; {{entry.date_posted}}                                
                                  &lt;/p&gt;
                                  {% for tag in entry.tagList %}
                                      &lt;span class="label label-default"&gt;{{tag}}&lt;/span&gt;
                                  {% endfor %}
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                      {% else %}
                          &lt;h1&gt;&lt;em&gt;No entries!&lt;/em&gt;&lt;/h1&gt;
                      {% endfor %}        
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  </code></pre>