Javascript not working properly on second div class

I took some code from here codepen. However, I’m too new to insert a link so if you’re feeling up to it it’s called “Cool Layout with Complex Chainable Animation”

and am trying to format it to work properly with my Shopify page. After a long week of fighting and guessing, I’ve got it set up how I’d like it. However, the Javascript will not work on the second row (as I made 8 vs 4).

When I click on the second row the numbers (overlay stay loaded over the image and the top row disappears. When I click on the top row everything functions as it should and the bottom stays loaded. I really don’t know Javascript but I’m so close to finishing this little project. ANY advice would be amazing.

document.addEventListener(“DOMContentLoaded”, function(event) {

(function(){

var $cont = document.querySelector(’.cont’);
var $conts = document.querySelector(’.cont-s–inactived’)
var $elsArr = [].slice.call(document.querySelectorAll(’.el’));
var $closeBtnsArr = [].slice.call(document.querySelectorAll(’.el__close-btn’));

setTimeout(function() {
$cont.classList.remove(‘s–inactive’);
}, 200);

setTimeout(function() {
$conts.classList.remove(‘s–inactived’);
}, 200);

$elsArr.forEach(function($el) {
$el.addEventListener(‘click’, function() {
if (this.classList.contains(‘s–active’)) return;
$cont.classList.add(‘s–el-active’);
this.classList.add(‘s–active’);
});
});
$elsArr.forEach(function($el){
$el.addEventListener(‘click’, function() {
if (this.classList.contains(‘s–active’)) return;
$conts.classList.add(‘s–el-active’);
this.classList.add(‘s–active’);
});
});
$closeBtnsArr.forEach(function($btn) {
$btn.addEventListener(‘click’, function(e) {
e.stopPropagation();
$cont.classList.remove(‘s–el-active’);
document.querySelector(’.el.s–active’).classList.remove(‘s–active’);
});
});

})();
});

can you put this code along with your html in codepen and paste the link here

kinda hard to figure out whats wrong just by looking at the Js alone

1 Like