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>- Is it possible to pull css values with HTA javascript?
- What a strange syntax?
- JavaScript / Jest: How to show logs from test case only when test fails?
- How to secure my login page
- How can I create a two-way mapping in JavaScript, or some other way to swap out values?
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()?
- How to filter object array based on attributes?
- How do you convert from emoji to unicode escapes in JS
- How to simulate a mouse click?
- Is it possible to add a single item to a vis.js timeline?
- How to ensure order of Cypress request execution
- Jquery Ajax Problem
- Can I run a function after navigating to a new page and waiting for that page to finish loading?
- Cannot start cocos after adding a new file
- Active link with React-Router?
- Is there a way to schedule offline notifications in a pwa?
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- LeafLet map doesnt render properly on modal
- Create object from array
- How to ignore lines of code from coverage in vitest?
- How to manage CORS in Django
- How can I get an element's Accessible Name in javascript in the browser?
- TypeError: fs.readFileSync is not a function in Next.js
- Show hide divs on click in HTML and CSS without jQuery
- If an IIFE contains just one variable declaration that is immediately exported to global scope, why bother with it?
- Need explanation on following type of Javascript code
- What does an array literal with the `for` keyword inside mean in JavaScript?
- How to call a function every minute in a React component?