Amend code to work for different situations

JavaScript
1

I have found some code (source lost, i’m afraid) that shows and hides divs to give a tabbed approach to a page. One part of the code hides all DIV with an id starting “sec” + an integer (sec1, sec2…).
My issue is that i want the most efficient code - this sample is hard coded for 3 div (sec1, sec2, sec3) but other pages will have more or fewer divs, so i would like to amend this code to iterate thru all secX divs, no matter how many or few.

Code is


if (ng5) document.getElementById('sec1').style.visibility = "hidden"
else if (ns4) document.sec1.visibility = "hide"
else if (ie4) sec1.style.visibility ="hidden"

if (ng5) document.getElementById('sec2').style.visibility = "hidden"
else if (ns4) document.sec2.visibility = "hide"
else if (ie4) sec2.style.visibility ="hidden"

if (ng5) document.getElementById('sec3').style.visibility = "hidden"
else if (ns4) document.sec3.visibility = "hide"
else if (ie4) sec3.style.visibility ="hidden"

Thanks in advance for any help!!

2

That code is terribly outdated… It’ll be easier if you use some kind of framework (eg: jQuery).

However, I’d work with this function:

function hideDivs(x){
	var i = 0;
	for(i = 1;i <= x; i++){
		document.getElementById("sec" + i).style.visibility = "hidden";
	}
}

You just call this function and pass along the number of divs there are on the page, for example: hideDivs(5).
I haven’t added a check to see if the element actually exists, that’s something you can/may add yourself :slight_smile:

If you use jQuery, you can use the following:

function hideDivs(){
	$( "div[id^='sec']").css( "visibility", "hidden" );
}