Свертывание div и открытие еще одного бутстрапа

Question

Я использую Bootstrap, и я пытаюсь использовать Collapse. Я хочу, чтобы div #film скрыть, когда я нажимаю <li class="rekruterring>, и мне что-то не хватает. Он не будет закрыт, независимо от того, что я делаю, я пробовал с аккордеоном, data-parents, javascript, и ничто не заставляет #film div скрыть, когда я нажимаю .rekruterring, и отображается div div #rekruttering.

Это мой код и помните, что #rekruterring расширяется как следует, но не скрывает #film.

/* Latest compiled and minified JavaScript included as External Resource */ 
 

 
/* DOES NOTHING */ 
 
$(document).ready(function() { 
 
    $(".rekruttering").click(function() { 
 
    $("#film").collapse('hide'); 
 
    }); 
 
})

/* VIMEO */ 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.video { 
 
    background: #fff; 
 
    padding-bottom: 20px; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); 
 
    width: 100%; 
 
    /* Thumbnails 5 across */ 
 
    margin: 1%; 
 
} 
 
.video img { 
 
    width: 100%; 
 
    opacity: 1; 
 
} 
 
.video img:hover, 
 
.video img:active, 
 
.video img:focus { 
 
    opacity: 0.75; 
 
} 
 
.categories li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="accordion" class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-12 text-center"> 
 
     <h2 class="section-heading">Galleri</h2> 
 
     <hr class="bg-primary"> 
 
    </div> 
 
    <div class="col-lg-12 categories text-center"> 
 
     <ul> 
 
     <a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> | 
 
     <a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> | 
 
     <li>TV -/Biografspots & Imagefilm</li>| 
 
     <li>Salgs- & Produktfilm</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div id="film" class="row text-centered collapse in"> 
 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h3 class="videoTitle" style="text-align:center;">FILM</h3> 
 
     </article> 
 
    </div> 
 

 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h3 class="videoTitle" style="text-align:center;">FILM</h3> 
 
     </article> 
 
    </div> 
 

 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h3 class="videoTitle" style="text-align:center;">FILM</h3> 
 
     </article> 
 
    </div> 
 

 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h2 class="videoTitle" style="text-align:center;">FILM</h2> 
 
     </article> 
 
    </div> 
 

 
    </div> 
 
    <!-- FILM --> 
 

 

 
    <div id="rekruterring" class="row text-centered collapse"> 
 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3> 
 
     </article> 
 
    </div> 
 

 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3> 
 
     </article> 
 
    </div> 
 

 

 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3> 
 
     </article> 
 
    </div> 
 

 
    <div class="col-lg-3 text-centered"> 
 
     <article class="video"> 
 
     <figure> 
 
      <a class="" href="//vimeo.com/1084537" data-lity> 
 
      <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg"> 
 
      </a> 
 
     </figure> 
 
     <h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2> 
 
     </article> 
 
    </div> 
 

 
    </div> 
 
    <!-- REKRUTERRING --> 
 

 
</div>

Answer 1

Это не работает, потому что есть Bootstrap ошибка/проблема при использовании parent класса. Он полагается на использование класса panel, обернутого вокруг ваших элементов collapse.

https://github.com/twbs/bootstrap/issues/10966

Updated JSFiddle

<div class="panel"> 
    <div id="film" class="row text-centered collapse in"> 

<div class="panel"> 
    <div id="rekruterring" class="row text-centered collapse">