traversing an html file to get a a href - javascript

My html file is as below
<div id="sidebar" style="top: 100px;">
<div class="items">
<div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art1
</h3>
</div>
<div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
.
.
.
</div>
</div>
</div>
The html has a div with id sidebar
Under that there is another div with class items
Under that there are multiple divs with class item
Under each div with class item I have a h3 with class title
Under h3 tag I have 'a' tag
I need to get the href values of 'a' tags under all divs with class item.
I would appreciate some help as to how to do the same.
Thanks


Once try with inline jQuery:
$.each($("#sidebar .items .item h3 a"),function(a,b){console.log($(b).attr("href"));});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" style="top: 100px;">
<div class="items">
<div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art1
</h3>
</div>
<div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art2
</h3>
</div>
</div>
</div>


You can first get all divs with class item using getElementsByClassNameand then for each div find all the anchor tags under that div using getElementsByTagName.
const itemDivs = [...document.getElementsByClassName('item')];
const hrefs = [];
itemDivs.forEach(div => {
const anchors = [...div.getElementsByTagName('a')];
if (anchors && anchors.length > 0) {
anchors.forEach(a => hrefs.push(a.href));
}
});
console.log(hrefs); // prints ["http://mywebsiteurl/2013/03/blog-post.html"]


You can try using DOMParser api
let html = `<div id="sidebar" style="top: 100px;">
<div class="items">
<div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art1
</h3>
</div>
<div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
</div>
</div>
<div class = 'item'>
<a href='http://example1.com'/>
</div>
<div class = 'noitem'>
<a href='http://example2.com'/>
</div>
</div>`
let parser = new DOMParser()
let parsed = parser.parseFromString(html, 'text/html')
let anchors = [...parsed.querySelectorAll('.item > a')]
let hrefs = anchors.map(v=> v.href)
console.log(hrefs)

Related

choosing and selecting from divs

I have 2 divs like this belonging to different teams. All of them has different names and ids
<div id="joinville">
<div class="gk">
<div id="john">
<img src:xxx ">
<h6 class="namejoinville ">John</h6>
</div>
<div id="jake ">
<img src:xxx">
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src:xxx ">
<h6 class="namejoinville ">Allan</h6>
</div>
</div>
</div>
<div id="thunder ">
<div class="gk ">
<div id="amilcar ">
<img src:xxx">
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src:xxx ">
<h6 class="namethunder ">Peter</h6>
</div>
<div id="jm ">
<img src:xxx">
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
Them I have this:
<div id="onethree">
<div id="grteam">
<img src="xxx"">
<h6 id="j1">GK</h6>
</div>
I want to whenever I click on one of the player to change the "grteam" div to the one selected.
How can i make this with js?
Sorry, if this is basic stuff but i'm still a begginner

when you click on the player name his data moves to #grteam
document.querySelectorAll('.gk div h6').forEach(player => {
player.addEventListener('click', updateSelectedPlayer, this);
});
function updateSelectedPlayer(player) {
let greatPlayerImg = document.querySelector('#grteam>img'),
greatPlayerName = document.querySelector('#grteam>h6'),
selectedPlayerImg = player.target.parentNode.querySelector('img').src,
selectedPlayerName = player.target.innerHTML;
greatPlayerImg.src = selectedPlayerImg;
greatPlayerName.innerHTML = selectedPlayerName;
}
<div id=Joinville>`
<div class="gk">
<div id="john">
<img src='xxx'>
<h6 class="namejoinville">John</h6>
</div>
<div id="jake">
<img src='xxx'>
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src='xxx'>
<h6 class="namejoinville">Allan</h6>
</div>
</div>
</div>
<div id=Joinville>`
<div class="gk">
<div id="amilcar">
<img src='xxx'>
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src='xxx'>
<h6 class="namethunder">Peter</h6>
</div>
<div id="jm">
<img src='xxx'>
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
<div id="onethree">
<div id="grteam">
<img src="xxx">
<h6 id="j1">GK</h6>
</div>
</div>

I suggest as a beginner that you get used to using common class names for similar elements
Here I have two class="team" and each team has a group of class="player" and each player has an inner class="player-name"
Note that the id on player elements is irrelevant this way
You can add other classes as well but this helps styling the structure and makes the javascript simpler to traverse these common items
Working example without the images. You can extend this to work with those yourself
const players = document.querySelectorAll('.player')
players.forEach(function(el) {
el.addEventListener('click', function(e) {
// name of selected player
const name = el.querySelector('.player-name').textContent;
// add selected name to grteam
document.querySelector('#j1').textContent = name;
// remove active class from players
players.forEach(function(el) {
el.classList.remove('active')
})
// add active class to selected player
el.classList.add('active')
})
})
#container{display:flex}
.team{flex-basis:50%;padding:.5em}
h6{ font-size: 1em; margin:0}
.player{ border:2px solid #ccc; padding:.5em; margin-bottom:1em}
.player.active{border-color:red}
<div id="grteam">
Active: <strong id="j1">None</strong>
</div>
<div id="container">
<div class="team">
<div class="player">
<h6 class="player-name">John</h6>
</div>
<div class="player">
<h6 class="player-name">Jake</h6>
</div>
<div class="player">
<h6 class="player-name">Allan</h6>
</div>
</div>
<div class="team">
<div class="player">
<h6 class="player-name">Amilcar</h6>
</div>
<div class="player">
<h6 class="player-name">Peter</h6>
</div>
<div class="player">
<h6 class="player-name">James</h6>
</div>
</div>
</div>

How do I get a 4by4 grid to display all my puzzle pieces?

I'm trying to make an image puzzle game where there is a 4by4 grid to try to solve a shuffled puzzle. I tried creating a 4by4 grid but had no luck let alone have each element in the array correspond to a puzzle piece on the board. I tried making divs for each image but couldn't figure out a way to display them properly on the board. How do I accomplish a 4by4 grid that can correspond to elements in my array?
Note: I know that my images don't display properly because the files haven't been converted to stack overflow's server, ignore it for now.
var pieces = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,];
function initialize()
{
for( var i = pieces.length; i<16; i++;){}
}
function shuffle()
{
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: radial-gradient(#9D5900, #3D2200);
}
.game-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
margin: 50px;
justify-content: center;
perspective: 500px;
}
.card {
height: 225px;
width: 175px;
}
<!DOCTYPE html>
<html>
<title></title>
<link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
<script src="PicturePuzzle.js" type="text/javascript"></script>
<head>
<body onload = "initialize()">
<div class="game-container">
<div class="card">
<img src="char1.jpg">
</div>
<div class="card">
<img src ="char2.jpg">
</div>
<div class="card">
<img src ="char3.jpg">
</div>
<div class="card">
<img src="char4.jpg">
</div>
<div class="card">
<img src="char5.jpg">
</div>
<div class="card">
</div>
<img src="char6.jpg">
</div>
<div class="card">
<img src="char7.jpg" >
<div class="card">
<img src="char8.jpg" >
</div>
<div class="card">
<img src="char9.jpg" >
</div>
<div class="card">
<img src="char10.jpg">
</div>
<div class="card">
<img src="char11.jpg">
</div>
<div class="card">
<img src="char12.jpg">
</div>
<div class="card">
<img src="char13.jpg">
</div>
<img src="char14.jpg">
</div>
<div class="card">
<img src="char15.jpg">
</div>
<img src="char16.jpg">
</div>
</div>
<button onclick = "shuffle()">Shuffle</button>
</body>
</head>
</html>

You have HTML errors messing up the grid - there are </div> tags in the wrong places - and missing <div> tags
Correct HTML:
<div class=game-container>
<div class=card>
<img src=char1.jpg>
</div>
<div class=card>
<img src=char2.jpg>
</div>
<div class=card>
<img src=char3.jpg>
</div>
<div class=card>
<img src=char4.jpg>
</div>
<div class=card>
<img src=char5.jpg>
</div>
<div class=card>
<img src=char6.jpg>
</div>
<div class=card>
<img src=char7.jpg>
</div>
<div class=card>
<img src=char8.jpg>
</div>
<div class=card>
<img src=char9.jpg>
</div>
<div class=card>
<img src=char10.jpg>
</div>
<div class=card>
<img src=char11.jpg>
</div>
<div class=card>
<img src=char12.jpg>
</div>
<div class=card>
<img src=char13.jpg>
</div>
<div class=card>
<img src=char14.jpg>
</div>
<div class=card>
<img src=char15.jpg>
</div>
<div class=card>
<img src=char16.jpg>
</div>
</div>
There is a Javascript error - it doesn't affect the grid
There should be no semicolon after the increment expression in loop control statement
Also prefer to use let instead of var
for(let i=pieces.length; i<16; i++) {}

How to make the second row of the second column be the same height as first column

I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.

My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help

Add identifier to duplicate classes in separate nested groups

In working with a code chunk such as the following, I am attempting to add a unique class name to each instance of the class "duplicated-class" which is on the same element as the class "affiliate-logo".
Important notes:
"duplicated-class" represents a dynamic variable, that could be anything.
The desired outcome is to append the duplicated classes with a numeral ('.class-1', '.class-2', '.class-3', etc....
Here is an example the code structure:
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
</div>
The post-item group is being generated from a COS-listing with the 'duplicate-class' being pulled from the {{name}} value that must allow for duplicate value entries.
While I can find methods for producing class lists for direct descendants of the wrapping ID, I cannot seem to find (or figure out) anything that produces the result of finding the "duplicate-class" while nested more deeply in the produced structure.
My initial thoughts are to:
Identify the post-item groups
Find the '.affiliate-logo' class within each post-item group
Identify the second class next to '.affiliate-logo' (in this example: .duplicate-class) and assign it to a variable (var = adjacentClass) <-- this is where I get lost on how to accomplish this check.
Check to see if (adjacentClass) matches any other (adjacentClass) from other post-item groups.
Use counter to act as unique identifier addition (var i = i)
if(adjacentClass === adjacentClass){ $(".duplicate-class').replaceClass('adjacentClass' + i) } else {}
(I would actually try write that logic out in javascript, if I could figure out step 3.)
Any assistance that can be offered for this issue would be much appreciated.
Articles I have referenced in attempting to find a solution:
How find nested div with same class name in jquery?
How do I access the list of classnames using javascript/jQuery?
jquery select class inside parent div
Target the 2nd instance of a CSS Class
** Edited to fix a terminology conflict

UPDATE 2
In Snippet 2 we have used .each() twice. Once to iterate every div.affiliate-logo and once for the second class each div.affiliate-logo has. A for loop filters out duplicates that are stored in an array. The hardest part was what OP had trouble was with getting the second class. This is how:
$(this).prop('classList');
In plain JavaScript, classList is a property when it's used without any .add, .remove, etc. it will return an array of classNames (in the comments of Snippet 2, any reference to a string in this array will be "classString").
Review Snippet 2 in Full page mode. Details are commented in Snippet 2.
UPDATE 1
the first 'duplicate-class' becomes 'duplicate-class-1', the second becomes 'duplicate-class-2'
Not sure what you are trying to do. I think you are thinking that classes are like DOM objects as elements are. Review the Snippet and let me know if this is what you wanted or not.
SNIPPET 1
$('.duplicate-class').each(function(idx, obj) {
var unique = 'duplicate-class' + (idx + 1);
$(this).addClass(unique)
$(this).text('this is ' + unique); //This is just to show it works
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
SNIPPET 2
// .each() .affiliate-logo do this...
$('.affiliate-logo').each(function(idx, obj) {
/* Get the classList .prop()erty and store it
|| in a var called list. list is now an array
|| of classes that belong to this particular
|| .affiliate-logo.
*/
var list = $(this).prop('classList');
// Store the second classString in a var called second
var second = list[1];
/* Create an array with the classString of 'affiliate-
|| logo' because we already know that it will be a
|| duplicate. Call this array dupes.
*/
var dupes = ['affiliate-logo'];
/* for every classString that's in dupes array
|| compare it to the value of second. If there's
|| a match bust out of this loop and go on to the
|| next .affiliate-logo.
*/
for (let a = 0; a < dupes.length; a++) {
if (second === dupes[a]) {
return;
}
}
/* Since there were no matches, we continue.
|| Push second in the dupes array so if ever found
|| again, second will be rejected by the previous
|| for loop.
*/
dupes.push(second);
/* Concat second with a dot so it'll pass as a class
|| selector then store it in a var called klass.
*/
var klass = '.' + second;
// each() klass will...
$(klass).each(function(index, item) {
/* concat second + (current)index as a string
|| then addClass() that string to the current
|| div.affiliate-logo.{{klass}}
*/
$(item).addClass(second + index);
/* insert text that shows it's new class. The
|| new unique class can be verified by F12.
*/
$(item).text('This is ' + second + index);
});
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo o-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo klass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo a-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo dupe-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo bass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo wrong-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo logo-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo long-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>

Collapsing a div and opening another one bootstrap

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">

Categories

Resources