Toggling a div based on the clicked box (multiple divs in a single page)

I am using isotope.js to toggle different divs, the number was quite controlled 6 to 8, so I was using this function:

function toggleSix(id) {
var container1 = document.getElementById("first");
var container2 = document.getElementById("second");
var container3 = document.getElementById("third");
var container4 = document.getElementById("fourth");
var container5 = document.getElementById("fifth");
var container6 = document.getElementById("sixth");
if (id === 1) {
    container2.style.display = "none";
    container3.style.display = "none";
    container4.style.display = "none";
    container5.style.display = "none";
    container6.style.display = "none";
    container1.style.display = "block";
} else if (id === 2) {
    container1.style.display = "none";
    container3.style.display = "none";
    container4.style.display = "none";
    container5.style.display = "none";
    container6.style.display = "none";
    container2.style.display = "block";
} ...

I have a page now that requires repeating the toggling for 8 blocks to switch between around 8 different divs per block/container.

So I would need each selector at the top of each container to represent a div, here is a snippest of HTML code:

<div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <ul class="filtering-menu text-center toggelable">
                    <li>
                      <a onclick="toggleSix(1)" class="active" href="#">TOTAL PER COLLEGE PER FACULTY</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(2)" href="#">TOTAL SPENDING COMPARISON</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(3)" href="#">FEES REQUESTS</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(4)" href="#">INCENTIVES REQUESTS</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(5)" href="#">FEES PER FACULTY MEMBER</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(6)" href="#">INCENTIVES PER FACULTY MEMBER</a>
                    </li>
                  </ul><!--filtering-menu-->
                </div><!--end of sub-tabs col-lg-12 col-md-12 col-sm-12 col-xs-12-->
              </div><!--end of sub-tabs row-->
              <div class="row filtering-content">
                <!-- single-lab start -->
                <div id="first" class="col-md-12 col-sm-12 col-xs-12"  style="display:block;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer1" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="second" class="col-md-12 col-sm-12 col-xs-12"  style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer2" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="third" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer3" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="fourth" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer4" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="fifth" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer5" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="sixth" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer6" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
              </div><!--row-->

Solution

If (?) I understood correctly you simply wish to toggle the visibility of a number of div elements based upon the hyperlink that is clicked. Instead of using actual ID attributes, for certain tasks it is easier to use a class attribute ~ here the various IDs vizContainer1, vizContainer2 etc can be replaced with a single class attribute vizContainer which then helps us identify an entire group of elements which we wish to process. In fact the code below doesn't need to use that to identify the elements as we are interested in the parent nodes.

By assigning the event listener externally we can uncouple the HTML and the javascript and provide a more generic event handler.

Note that in the HTML below I added data-id=first etc to the DIV elements that are to be toggle ONLY so that the DIV elements can display something ( with CSS ) and are not actually required. The data-id=1 etc attributes ARE required for this method to work.

The below can easily accommodate any number of DIV elements to be toggled (within reason) so I hope this helps a little.

/*
    Initially select ALL hyperlinks that will be used to trigger
    the toggle effect of DIV elements. By using the class of the
    parent and using DOM selectors we can easily identify the
    nodes we want to use.
*/
document.querySelectorAll('ul.filtering-menu li a').forEach(a=>{
    a.addEventListener('click',e=>{
        // Stop the default action of the hyperlink
        e.preventDefault();
        // find the dataset ID attribute
        let i=Number( e.target.dataset.id );
        
        // find ALL divs that are to be toggled & set the visibility to none unless it's
        // data-id corresponds to that of the clicked hyperlink
        let col=document.querySelectorAll('div.filtering-content > div');
            col.forEach( div=>{
                div.style.display = Number( div.dataset.id )==i ? 'block' : 'none'
            });
    })
})

.vizContainer:after{content:attr(data-id);color:red;font-size:2rem}

<div class='row'>
    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
      <ul class='filtering-menu text-center toggelable'>
        <li>
          <a data-id=1 class='active' href='#'>TOTAL PER COLLEGE PER FACULTY</a>
        </li>
        <li>
          <a data-id=2 href='#'>TOTAL SPENDING COMPARISON</a>
        </li>
        <li>
          <a data-id=3 href='#'>FEES REQUESTS</a>
        </li>
        <li>
          <a data-id=4 href='#'>INCENTIVES REQUESTS</a>
        </li>
        <li>
          <a data-id=5 href='#'>FEES PER FACULTY MEMBER</a>
        </li>
        <li>
          <a data-id=6 href='#'>INCENTIVES PER FACULTY MEMBER</a>
        </li>
        
        <li>
          <a data-id=7 href='#'>Another link - #7</a>
        </li>
        <li>
          <a data-id=8 href='#'>Another link - #8</a>
        </li>
      </ul>
    </div>
</div>
<div class='row filtering-content'>

    <div data-id=1 id='first' class='col-md-12 col-sm-12 col-xs-12' style='display:block;'>
      <h4 class='card-title'></h4>
      <div data-id='first' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=2 id='second' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='second' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=3 id='third' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='third' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=4 id='fourth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='fourth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=5 id='fifth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='fifth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=6 id='sixth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='sixth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    
    <div data-id=7 id='seventh' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='seventh' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=8 id='eighth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='eighth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
</div>