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’);
});
});})();
});