javascript and twig: show/hide items by clicking a checkbox

Question

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.

Answer 1

You are trying to set the style of the entire list of elements returned by querySelectorAll. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

You need to reference the specific element that you want to change the style to. (You also have a typo in your question (ckeckButton))

for (i=0; i<liNames; i++) {
        if (checkButton[i].checked){
            check = true;
            liNames[i].style.display = block;
        }
        else {
            check = false;
            liNames[i].style.display = none;
        }
    }
}