JS display mutiple DIVs

**Petsmacker** · 05-09-2008, 10:11 PM

Hey, right now I'm using a very handy script which allows me to display different divs:

HTML Code:

<html>
<head>
<script type="text/javascript">
var current = "1";
function displaydiv(id){
	if(!document.getElementById) return false;
	var div = document.getElementById("page"+id);
	var curDiv = document.getElementById("page"+current);
	curDiv.style.display = "none";
	div.style.display = "block";
	current = id;
}
</script>
</head>
<body>
<input type="button" value="div1" onclick="displaydiv(1); return false;">
<input type="button" value="div2" onclick="displaydiv(2); return false;">

<div id="type">
<div id="page1">Hello</div>
<div id="page2">Goodbye</div>
<div id="page3">Good Day</div>
</div>

<script type="text/javascript">
var divs = document.getElementById("type").getElementsByTagName("div");
for(i = 0; i < divs.length; i++){divs[i].style.display = "none";}
document.getElementById("page1").style.display = "block";
</script>
</body>
</html>

My question is, is there a way that I could get a single button to open say...Divs 1 + 3 at the same time?

**zxcvbnm60** · 01:47 AM

Here's one (kind of boring) way to it.

HTML Code:

<html>
<head>
<script type="text/javascript">
function displaydiv(sList){
    if(!document.getElementById) return false;
    
    //set all to off
    clearAll();
    //turn some back on
    sList += "";
    var ids=sList.split(/\s*,\s*/);
    for (id=0; id<ids.length; id++) {
        div = document.getElementById("page"+ids[id]);
        div.style.display = "block";
    }
}
function clearAll() {
    var divs = document.getElementById("type").getElementsByTagName("div");
    for(i = 0; i < divs.length; i++){divs[i].style.display = "none";}
}
</script>
</head>
<body>
<input type="button" value="div1" onclick="displaydiv('1'); return false;">
<input type="button" value="div2" onclick="displaydiv('2'); return false;">
<input type="button" value="div 1 and 3" onclick="displaydiv('1,3'); return false;">
<div id="type">
<div id="page1">Hello</div>
<div id="page2">Goodbye</div>
<div id="page3">Good Day</div>
</div>

<script type="text/javascript">
displaydiv("1");  //say hello
</script>
</body>
</html>

**Petsmacker** · 05-10-2008, 01:52 AM

Inspired. Thank you very much its exactly what I was looking for. Cheers.