I've got a gallery with items sourced from different folders, each with a data-id-name attribute equal to the folder name. Each folder also creates an input type="checkbox" item in a list. I'm trying to create a javascript function where checking a box with id="markers", for example, will hide all items that are not data-id-name="markers". I've gone through several permutations and still can't figure it out.
Here's my code so far:
<div class="gallery"> {% for p in page.collection %} {% if p.header.button %}<input type="checkbox" id="{{ p.slug }}" data-id-slug="{{ p.slug }}" class="gallery-label" onclick="opengallery()">{{ p.title }}</input> {% endif %} {% endfor %}<ul> {% for p in page.collection|randomize %} {% for image in p.media.images|randomize %}<li class="gallery-content" data-id-name="{{p.slug}}"> {{ image.lightbox.cropResize(360, 200).html()|raw }}</li> {% endfor %} {% endfor %}</ul></div><script>function opengallery() { check = false;// checkbox buttons const checkButton = document.getElementsByTagName("input"); idSlugs = checkButton.querySelectorAll('[data-id-slug]'); // slugArray = Array.from(idSlugs).map(item => item.dataset.idSlug);// image ids liNames = document.querySelectorAll('[data-id-name]'); // nameArray = Array.from(liNames).map(item => item.dataset.idName);// image list liList = document.getElementsByClassName("gallery-content");// console.log(slugArray);// console.log(nameArray); for (i=0; i<liNames; i++) { if (ckeckButton[i].checked){ check = true; liNames.style.display = block; } else { check = false; liNames.style.display = none; } }}</script>The twig code works fine, the gallery shows just as expected. I'm just losing my mind with javascript. Any help is appreciated.
