JavaScript hide/show DIVs based on button click

Question

So I've been trying to do a JavaScript filtering system, where it hides and shows DIVs based on what button/link is clicked. My buttons use my JavaScript functions filterAll() , filter1() , filter2() and filter3() . I've done some testing in another HTML document, just to get it work in a simpler document, but it only works with IDs and not Class names.

    <div class="row animate-box grid" id="product-grid">
            <!-- LEFTBAR -->
            <div class="col-sm-6 col-md-4 col-lg-3 p-b-50 grid-item bolcher shots misc" id="leftbar">
                <div class="p-r-20 p-r-0-sm button-group button-group">
                    <!--  -->
                    <h4 class="m-text14 p-b-7" id="button-group-title-categories">
                        Kategorier
                    </h4>

                    <ul class="" id="leftbar-ul">
                        <li class="p-t-4" data-filter="*">
                            <a href="#" class="s-text13 active1 filter-button" onclick="filterAll()">
                                    Alle
                                </a>
                        </li>

                        <li class="p-t-4" data-filter=".bolcher">
                            <a href="#" class="s-text13" onclick="filterBolcher()">
                                    Bolcher
                                </a>
                        </li>

                        <li class="p-t-4" data-filter=".shots">
                            <a href="#" class="s-text13" onclick="filterShots()">
                                    Shots
                                </a>
                        </li>

                        <li class="p-t-4" data-filter=".misc">
                            <a href="#" class="s-text13" onclick="filterMisc()">
                                    Diverse
                                </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- PRODUCTS LISTING -->
                        <div id="product_sorting-id_1" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/abrikos.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-1">
                                        Abrikos</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_2" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/althea.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-2">
                                        Althea</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_3" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/banan-Lakrids.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-3">
                                        Banan-Lakrids</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_4" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/banan.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-4">
                                        Banan</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_5" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/blaber.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-5">
                                        Blaber</p>
                    </div>
                </div>
            </div>
                      <div id="product_sorting-id_6" class="col-sm-12 col-md-6 col-lg-4 p-b-50 grid-item bolcher">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-img wrap-pic-w of-hidden pos-relative">
                        <img src="/images/products/bolcher/champagnebrus.jpg" alt="IMG-PRODUCT">
                    </div>

                    <div class="block2-txt p-t-20">
                        <p class="block2-name dis-block s-text3 p-b-5" id="product-id-6">
                                        Champagnebrus</p>
                    </div>
                </div>
            </div>
</div>

var g = document.getElementsByClassName("grid-item");
var b = document.getElementsByClassName("bolcher");
var s = document.getElementsByClassName("shot");
var m = document.getElementsByClassName("diverse");

function filterAll() {
  g.style.display="block";
}

function filterBolcher() {
  g.style.display="none";
  b.style.display="block";
}

function filterShots() {
  g.style.display="none";
  s.style.display="block";
}

function filterMisc() {
  g.style.display="none";
  s.style.display="block";
}

Answer 1

As Sebastian Olsen mentioned in comments, getElementsByClassName returns a node list, not single element, so you can think of it as about an array of elements. And to do something with these elements, you should pick the element from this array like g[index] . You can iterate through this array of elements via regular for loop for example, so your filterAll method should look something like this:

function filterAll() {
  for (var i = 0; i < g.length; i++) {
    g[i].style.display = "block";
  }
}

Answer 2

Since document.getElementsByClassName() returns a NodeList with the affected elements which is simply a collection of the class names, you can access it by using indexing (where the indexing starts with 0 ) or simply with a for loop.

var x = document.getElementsByClassName("example");
function function(){
    for (var i = 0; i < g.length; i++){
    x[i].style.display = "block";
  }
}

var x = document.getElementsByClassName("example");
x[0].style.display = "block";

Note that the for loop method adds a style display: block property for every element, while the indexing method will only apply style for the element with the given index.

W3C Schools' article about document.getElementsByClassName

Answer 3

Iterate through each element:

 function filterAll() {
 for(i=0;i<g.length;i++)
 g[i].style.display="block";
}

Answer 4

I fixed it by using the example from W3Schools.com: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

The code I've rewritten it to is:

var g = document.getElementsByClassName("grid-item");
var b = document.getElementsByClassName("bolcher");
var s = document.getElementsByClassName("shot");
var m = document.getElementsByClassName("diverse");
var i;

function filterAll() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "block";
  }
}

function filterBolcher() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "none";
  }
  for (i = 0; i < b.length; i++) {
    b[i].style.display = "block";
  }
}

function filterShots() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "none";
  }
  for (i = 0; i < s.length; i++) {
    s[i].style.display = "block";
  }
}

function filterMisc() {
  for (i = 0; i < g.length; i++) {
    g[i].style.display = "none";
  }
  for (i = 0; i < m.length; i++) {
    m[i].style.display = "block";
  }
}

What I'm doing is "going through" every element that has the corresponding class name, the changing the value of display (see more at the link).

Answer 5

Instead of writing a loop everytime, I used a function and called that one:

 var g = document.getElementsByClassName("grid-item"); var b = document.getElementsByClassName("bolcher"); var s = document.getElementsByClassName("shot"); var m = document.getElementsByClassName("diverse"); function filterAll() { applyDisplay(g, "block"); } function filterBolcher() { applyDisplay(g, "none"); applyDisplay(b, "block"); } function filterShots() { applyDisplay(g, "none"); applyDisplay(s, "block"); } function filterMisc() { applyDisplay(g, "none"); applyDisplay(m, "block"); } function applyDisplay(nodeList, display) { for (var i = 0; i<nodeList.length;i++){ var node = nodeList[i]; node.style.display = display; } } 

 <div class="row animate-box grid" id="product-grid"> <!-- LEFTBAR --> <div class="col-sm-6 col-md-4 col-lg-3 pb-50 grid-item bolcher shot diverse" id="leftbar"> <div class="pr-20 pr-0-sm button-group button-group"> <!-- --> <h4 class="m-text14 pb-7" id="button-group-title-categories"> Kategorier </h4> <ul class="" id="leftbar-ul"> <li class="pt-4" data-filter="*"> <a href="#" class="s-text13 active1 filter-button" onclick="filterAll()"> Alle </a> </li> <li class="pt-4" data-filter=".bolcher"> <a href="#" class="s-text13" onclick="filterBolcher()"> Bolcher </a> </li> <li class="pt-4" data-filter=".shots"> <a href="#" class="s-text13" onclick="filterShots()"> Shots </a> </li> <li class="pt-4" data-filter=".misc"> <a href="#" class="s-text13" onclick="filterMisc()"> Diverse </a> </li> </ul> </div> </div> <!-- PRODUCTS LISTING --> <div id="product_sorting-id_1" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/abrikos.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-1"> Abrikos</p> </div> </div> </div> <div id="product_sorting-id_2" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/althea.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-2"> Althea</p> </div> </div> </div> <div id="product_sorting-id_3" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/banan-Lakrids.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-3"> Banan-Lakrids</p> </div> </div> </div> <div id="product_sorting-id_4" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/banan.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-4"> Banan</p> </div> </div> </div> <div id="product_sorting-id_5" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/blaber.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-5"> Blaber</p> </div> </div> </div> <div id="product_sorting-id_6" class="col-sm-12 col-md-6 col-lg-4 pb-50 grid-item bolcher"> <!-- Block2 --> <div class="block2"> <div class="block2-img wrap-pic-w of-hidden pos-relative"> <img src="/images/products/bolcher/champagnebrus.jpg" alt="IMG-PRODUCT"> </div> <div class="block2-txt pt-20"> <p class="block2-name dis-block s-text3 pb-5" id="product-id-6"> Champagnebrus</p> </div> </div> </div> </div> 

Also note that your filter div contains the classes shots and misc where it should be shot and diverse according to your javascript. (or else change the names in the javascript, whatever)

I also corrected the fact that your question used s instead of m in the filterMisc function.