Member Avatar for chuffman

Hello,

What I am trying to do is show or hide a div when a user clicks the link, but I have multiple divs that belong in the same place so when the user clicks a link it needs to hide the current div, if there is one, and then show the new one. I have tried a variety of code and I am rather new to Javascript.

I've tried this way:

function showElement(layer){
	var myLayer = document.getElementById(layer);
	
	if(myLayer.style.display=="none"){
		myLayer.style.display="block";
		myLayer.backgroundPosition="top";
		var changeddiv = document.getElementById(layer);
	}
		
		if(chageddiv == 'sub_cat_1') {
			document.getElementById('sub_other_services').style.display="none";
			document.getElementById('sub_other_services').backgroundPosition="top";
			document.getElementById('sub_about_us').style.display="none";
			document.getElementById('sub_about_us').backgroundPosition="top";
			document.getElementById('sub_comp_info').style.display="none";	
			document.getElementById('sub_comp_info').backgroundPosition="top";
			document.getElementById('sub_cat_2').style.display="none";	
			document.getElementById('sub_cat_2').backgroundPosition="top";
		}

and this way:

function showElement(layer){
	var myLayer = document.getElementById(layer);
	
	if(myLayer.style.display=="none"){
		myLayer.style.display="block";
		myLayer.backgroundPosition="top";
    }
		
		if(document.getElementById('sub_other_services').style.display=="block") {
			document.getElementById('sub_cat_1').style.display="none";
			document.getElementById('sub_cat_1').backgroundPosition="top";
			document.getElementById('sub_about_us').style.display="none";
			document.getElementById('sub_about_us').backgroundPosition="top";
			document.getElementById('sub_comp_info').style.display="none";	
			document.getElementById('sub_comp_info').backgroundPosition="top";
			document.getElementById('sub_cat_2').style.display="none";	
			document.getElementById('sub_cat_2').backgroundPosition="top";
		}

and both were to no avail. Any help would be much appreciated.

  • 2 Contributors
  • 2 Replies
  • 114 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by chuffman

Dani AI

Generated

posted a couple of attempts and provided a working approach that explicitly hides the other panels and shows the requested one. For maintainability and accessibility, prefer grouping those panels with a shared class and using attributes on the triggers, rather than hard-coding an ID list. That makes it easier to add or remove panels without changing JavaScript, avoids reading inline styles (which can be misleading when visibility is set in CSS), and lets you update ARIA state for screenreaders.

Use event delegation and class toggling so a single handler controls the whole group. The example below shows a simple, modern pattern: triggers carry a data attribute naming the target panel; panels share a class; the script hides all panels in the group, then reveals the target and updates aria-hidden. This is different from the ID-array approach and scales better.

document.addEventListener('click', function(e){
  var trigger = e.target.closest('[data-show-panel]');
  if (!trigger) return;
  var targetId = trigger.getAttribute('data-show-panel');
  var panels = document.querySelectorAll('.panel-group .panel');
  panels.forEach(function(p){ p.classList.remove('is-visible'); p.setAttribute('aria-hidden','true'); });
  var target = document.getElementById(targetId);
  if (target) {
    target.classList.add('is-visible');
    target.setAttribute('aria-hidden','false');
    if (typeof target.focus === 'function') { target.tabIndex = -1; target.focus(); }
  }
});

Troubleshooting notes: ensure your CSS defines the hidden/visible rules (avoid animating display; use opacity/visibility for transitions), check for null returns from getElementById before touching elements, and provide keyboard access and ARIA attributes so assistive tech can follow state changes. For small, fixed lists 's idea is fine; for anything that will grow or be styled/animated, the class/data-driven pattern above is more robust.

Recommended Answers

All 2 Replies

Member Avatar for Airshow

Chuffman,

Try this:

function showElement(divID){
	var divIDs = [ 'sub_other_services', 'sub_about_us', 'sub_comp_info', 'sub_cat_1', 'sub_cat_2' ];//Array of divsIDs in the group
	for(var i=0; i<divIDs.length; i++){//loop through the array
		document.getElementById(divIDs[i]).style.display = (divIDs[i] == divID) ? 'block' : 'none';//show the required div, and hide all the others
	}
}

For explanation, see comments in code.

Airshow

Member Avatar for chuffman

Hey,

It worked, thanks alot!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.