Not sure what I'm missing here, but trying to hide the entire container for links parent-container if the anchor links inside it are set to inline display: none
I've tried checking if the style is none with
[...document.querySelectorAll(".parent-container a")].map(item => item.style.display == "none" && document.querySelectorAll(".parent-container").style = "display: none")
But can't get it to check correctly.
const parentContainer = document.querySelector(".parent-container [data-filter]");
const toggleViews = function(filterName) {
parentContainer.forEach($el => {
if ($el.dataset.filter == filterName || filterName == 'show-all') {
$el.style.display = "initial";
} else {
$el.style.cssText = "display:none!important";
}
});
};
section {
border: 1px solid #000;
}
<section class="parent-container">
<div>
<div class="">
<header>
<h3>heading</h3>
</header>
<div class="col-w1">
<a href="#" class="" style="display: none;" data-filter="car">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: none;" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: none;" data-filter="house">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
</div>
</div>
</div>
</section>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>heading</h3>
</header>
<div class="col-w1">
<a href="#" class="" style="display: block;" data-filter="house">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: block;" data-filter="car">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: block;" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
</div>
</div>
</div>
</section>
You need a nested loop, the outer iterating over each parent-container and the inner over each a element, here using NodeList.forEach for the outer loop and Array.every over the a elements queried from each container (with getElementsByTagName in this case).
document.querySelectorAll(".parent-container").forEach(container => {
const aElements = [...container.getElementsByTagName("a")];
if (aElements.every(element => element.style.display === "none")) {
container.style.display = 'none'
} else {
container.style.display = 'block'
}
});
section{
border: 1px solid #000;
}
<section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div></div></div></div></section><section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div></div></div></div></section>
Edit
In response to your more complete snippet here is an extended example. You are still not addressing the multiple levels necessary to achieve what you need (as noted by #danh in the comments as well). You need to address each parent-container and then the relevant children of each individually. The example below first uses your logic to filter the children of each container, and then checks if they have all been hidden or not. I've implemented it with a .hidden class instead of inline CSS but you can adapt as you see fit.
// query only the parent-containers
const parentContainers = document.querySelectorAll(".parent-container");
function toggleViews(filterName) {
for (const container of parentContainers) {
// query relevant children
const elements = [...container.querySelectorAll("[data-filter]")];
// hide filtered elements
for (const element of elements) {
if (element.dataset.filter === filterName || filterName === 'show-all') {
element.classList.remove('hidden');
} else {
element.classList.add('hidden');
}
}
// hide parent if all children are hidden
if (elements.every(element => element.classList.contains('hidden'))) {
container.classList.add('hidden');
} else {
container.classList.remove('hidden');
}
};
};
document.addEventListener('click', (e) => {
if (e.target.nodeName === 'BUTTON'){
toggleViews(e.target.textContent.toLowerCase().replace(' ', '-'));
}
});
section {
border: 1px solid #000;
}
.hidden {
display: none;
}
<button type="button" class="filter">Boat</button>
<button type="button" class="filter">House</button>
<button type="button" class="filter">Car</button>
<button type="button" class="filter">Show all</button>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>Section 1</h3>
</header>
<div class="col-w1">
<a href="#" class="" data-filter="car">
<div class="col-item">
<img src="#" alt="">Car
</div>
</a>
<a href="#" class="" data-filter="bicycle">
<div class="col-item">
<img src="#" alt="">Bicycle
</div>
</a>
<a href="#" class="" data-filter="house">
<div class="col-item">
<img src="#" alt="">House
</div>
</a>
</div>
</div>
</div>
</section>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>Section 2</h3>
</header>
<div class="col-w1">
<a href="#" class="" data-filter="shed">
<div class="col-item">
<img src="#" alt="">Shed
</div>
</a>
<a href="#" class="" data-filter="car">
<div class="col-item">
<img src="#" alt="">Car
</div>
</a>
<a href="#" class="" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Boat
</div>
</a>
</div>
</div>
</div>
</section>
Related
I'm making a simple JS slider and I want to change the order of the images when I click on the prev/next button:
<div id="slider-container">
<div class="btn" id="prevBtn">
<i class="arrow arrowLeft"></i>
</div>
<div class="multiple-items">
<div>
<img class="carousel-img" src="assets/carousel/img1.png">
</div>
<div>
<img class="carousel-img" src="assets/carousel/img2.png">
</div>
<div>
<img class="carousel-img" src="assets/carousel/img3.png">
</div>
<div>
<img class="carousel-img" src="assets/carousel/img4.png">
</div>
<div>
<img class="carousel-img" src="assets/carousel/img5.png">
</div>
</div>
<div class="btn" id="nextBtn">
<i class="arrow arrowRight"></i>
</div>
</div>
I want to switch img2 with img1 and img1 goes to the img5 place.
JS code, added listeners to buttons:
prevBtn.addEventListener('click', () => {
if (i > 1) {
i--
} else {
i = 5;
}
});
nextBtn.addEventListener('click', () => {
if (i < 5) {
i++
} else {
i = 1;
}
})
To do what you require you can select the :first-child/:last-child div elements and append()/prepend() them within their respective container:
const carousel = document.querySelector('.multiple-items');
document.querySelector('#prevBtn').addEventListener('click', () => {
const last = carousel.querySelector('div:last-child');
carousel.prepend(last);
});
document.querySelector('#nextBtn').addEventListener('click', () => {
const first = carousel.querySelector('div:first-child');
carousel.append(first);
});
.multiple-items > div {
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #CCC;
}
<div id="slider-container">
<div class="btn" id="prevBtn">
<i class="arrow arrowLeft">Prev</i>
</div>
<div class="multiple-items">
<div>
<img class="carousel-img" src="assets/carousel/img1.png" alt="img1" />
</div>
<div>
<img class="carousel-img" src="assets/carousel/img2.png" alt="img2" />
</div>
<div>
<img class="carousel-img" src="assets/carousel/img3.png" alt="img3" />
</div>
<div>
<img class="carousel-img" src="assets/carousel/img4.png" alt="img4" />
</div>
<div>
<img class="carousel-img" src="assets/carousel/img5.png" alt="img5" />
</div>
</div>
<div class="btn" id="nextBtn">
<i class="arrow arrowRight">Next</i>
</div>
</div>
Don't use IDs. You're limiting yourself to not being able to reuse your component inside a page. Use classes instead and have as many carousels as you desire
Use <button> instead of <div>
Use a live HTMLCollection by using Element.children
Use .append() and .prepend() Element methods
Use a more consistent CSS naming convention
document.querySelectorAll('.slider').forEach((elSlider) => {
const elItems = elSlider.querySelector(".slider-items");
const slides = elItems.children;
elSlider.querySelector(".slider-btn.prev").addEventListener("click", () => {
elItems.prepend(slides[slides.length - 1]);
});
elSlider.querySelector(".slider-btn.next").addEventListener("click", () => {
elItems.append(slides[0]);
});
});
.slider-items {
display: flex;
}
<div class="slider">
<div class="slider-items">
<div><img src="//via.placeholder.com/100x100/0bf?text=1" alt="img1"></div>
<div><img src="//via.placeholder.com/100x100/fb0?text=2" alt="img2"></div>
<div><img src="//via.placeholder.com/100x100/f0b?text=3" alt="img3"></div>
<div><img src="//via.placeholder.com/100x100/bf0?text=4" alt="img4"></div>
<div><img src="//via.placeholder.com/100x100/b0f?text=5" alt="img5"></div>
</div>
<button type="button" class="slider-btn prev" aria-label="previous">←</button>
<button type="button" class="slider-btn next" aria-label="next">→</button>
</div>
<div class="slider">
<div class="slider-items">
<div><img src="//via.placeholder.com/100x100/222?text=1" alt="img1"></div>
<div><img src="//via.placeholder.com/100x100/444?text=2" alt="img2"></div>
<div><img src="//via.placeholder.com/100x100/666?text=3" alt="img3"></div>
<div><img src="//via.placeholder.com/100x100/888?text=4" alt="img4"></div>
<div><img src="//via.placeholder.com/100x100/ccc?text=5" alt="img5"></div>
</div>
<button type="button" class="slider-btn prev" aria-label="previous">←</button>
<button type="button" class="slider-btn next" aria-label="next">→</button>
</div>
Thanks to the live HTMLCollection, with the example above you can also add or remove slides dynamically; the script will still work as expected.
What is still missing in the above is a better UI/UX. In the real world things do not teleport; users are used to cognitively perceive motion through animation. But that's another question.
I'm trying this code on website but it not working at all.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
var link = jQuery(location).attr('pathname');
var fullurl = jQuery(location).attr('href');
if (link.split("/")[3] === "sardines") {
console.log("fullurl = " + fullurl);
console.log("pathname = " + link);
console.log("loop sardines");
jQuery('#sardines').addClass('capik');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('capik');
console.log("end addClass");
}
else{
console.log("end of loop");
}
<div id="all-product-categories">
<div class="all-categories">
<h2>All Categories</h2>
</div>
<div class="col-12">
<div id="sardines" class="sardines col-3">
<a href="/index.php/products/sardines" alt="Sardines">
<div class="box">
<span>SARDINES</span>
<img src="images/AYAM-product-categories/sardines.png" alt="sardines" width="150" height="150" />
</div>
</a>
</div>
<div id="saba" class="saba col-3">
<a href="/index.php/products/saba" alt="Saba">
<div class="box">
<span>SABA</span>
<img src="images/AYAM-product-categories/saba.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="mackerel" class="col-3">
<a href="/index.php/products/mackerel" alt="Mackerel">
<div class="box">
<span>MACKEREL</span>
<img src="images/AYAM-product-categories/mackerel.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="tuna" class="col-3">
<a href="/index.php/products/tuna" alt="Tuna">
<div class="box">
<span>TUNA</span>
<img src="images/AYAM-product-categories/tuna.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
<div class="col-12">
<div id="bakedbeans" class="col-3">
<a href="/index.php/products/baked-beans" alt="Baked Beans">
<div class="box">
<span>BAKED BEANS</span>
<img src="images/AYAM-product-categories/baked-beans.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="coconut" class="col-3">
<a href="/index.php/products/coconut" alt="Coconut">
<div class="box">
<span>COCONUT</span>
<img src="images/AYAM-product-categories/coconut.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="fruits" class="col-3">
<a href="/index.php/products/fruits" alt="Fruits">
<div class="box">
<span>FRUITS</span>
<img src="images/AYAM-product-categories/fruits.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="vegetables" class="col-3">
<a href="/index.php/products/vegetables" alt="Vegetables">
<div class="box">
<span>VEGETABLES</span>
<img src="images/AYAM-product-categories/vegetables.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
Can someone help me with this issue. The script are running fine on the site but the jQuery not adding any class on the selected id. The loop also working fine. How to make the jQuery add the new class on the selected div id. Here i'm attaching the screenshot for the console that show the script are running fine and screenshot for the html. But the class are not added into the selected one.Look like it skipping the addClass script there.
This is when i'm on sardines page.
Wrap your code with jQuery(document).ready. Your code might have been executed before the html was fully loaded. Means that your selectors got executed when the element is not present yet..
// document.ready
jQuery(document).ready(function () {
var link = jQuery(location).attr('pathname');
console.log("url = " + link);
console.log(link.split("/")[3]);
console.log(link.split("/")[3] === "sardines");
if (link.split("/")[3] === "sardines") {
console.log("loop sardines");
jQuery('#sardines').addClass('class');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('class');
console.log("end addClass");
}
else{
console.log("end of loop");
}
})
<!-- A not working example, inspect element you see there's no class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#test").addClass("test");
</script>
<div id="test">
Test
</div>
<!-- A working example, inspect element you see there's a class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#test").addClass("test");
});
</script>
<div id="test">
Test
</div>
Hope that helps
I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks!
$(document).ready(function () {
$('.titleContainer').each(function(){
$(this).prependTo('.imageContainer a');
});
});
.imageContainer{
background: rgb(144, 144, 221);
}
.card{
margin-right: 20px;
flex: 0 0 30%;
}
h3{
color: black
}
body{
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>
You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a
$(document).ready(function() {
$('.titleContainer').each(function() {
$(this).prependTo($(this).closest('.card').find('.imageContainer a'));
});
});
.imageContainer {
background: rgb(144, 144, 221);
}
.card {
margin-right: 20px;
flex: 0 0 30%;
}
h3 {
color: black
}
body {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>
$(function(){
$('.titleContainer').each(function(){
$(this).prependTo($(this).next().find('a'));
});
});
Codepen
Note: $(function(){}) === $(document).ready(function(){});
I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.
Every now and then, I visit the page and some of the images are overlapping each other like so:
But then when I refresh the page, it displays it properly:
I tried specifying a height on the container element but to no avail.
Here is the code I'm using:
CSS:
.packery-grid {
min-height: 500px;
}
.packery-grid-03 {
width: 20%;
}
.packery-grid-06 {
width: 40%;
}
.packery-grid figure {
padding: 15px;
}
jQuery:
$(document).ready(function() {
// visuals
$('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
});
HTML:
<div class="row">
<div class="packery-grid">
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
I think I've found the solution on their support page
Unloaded images can throw off Packery layouts and cause item elements
to overlap. imagesLoaded resolves this issue.
And so I've modified my code like so:
// visuals
var $grid = $('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
// layout Packery after each image loads
// to prevent overlapping images
$grid.imagesLoaded().progress( function() {
$grid.packery();
});
I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #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>
This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
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">