show and hide multiple <div>

Scruff · 27-06-2006 10:38am #1

What is the best way to be able to show and hide multiple <div> elements? It seems you cant have the same id for multiple divs. Can you use any other attribute to group them in order to go throught them and change the style"display:" atttribute? or is there an alternative to using <div>
I'm not too familiar with CSS
Using javascript on a html page.

Eoin · 27-06-2006 11:43am

Scruff wrote:

What is the best way to be able to show and hide multiple <div> elements? It seems you cant have the same id for multiple divs. Can you use any other attribute to group them in order to go throught them and change the style"display:" atttribute? or is there an alternative to using <div>
I'm not too familiar with CSS
Using javascript on a html page.

Don't reference your DIVs by element ID in your CSS, create a class for the show and hide, and assign the class through JavaScript.

e.g.

<style type="text/css">
.showMe
{
    /* CSS atrributes here */
}
.hideMe
{
    /* CSS atrributes here */
}
</style>

...

<script type="text/JavaScript">
    document.getElementById("div1").className = 'showMe';
    document.getElementById("div2").className = 'hideMe';
</script>
...

<div id="div1">div 1 here</div>
<div id="div2">div 2 here</div>

Scruff · 27-06-2006 12:01pm

Thanks for that but the problem with that is you still have to go through all the div's by each id and set them manually.

I should explain a bit more. I'm doing a bi-lingual web site and on the click of a button i want to be able to hide the Irish menu items and page text and show the english ones and visa versa. So for each page i could have and number of <div> tags for the various bits of content.
I'm creating a template for myself so that once its done work on additional pages will be minimal and it'll be easy to maintian.

Would it be possible to have maybe even a standard naming convention like

<div id="eng1" >content</div>
<div id="eng2">content</div>
....
<div id="engN">content</div>

<div id="gae1">content</div>
<div id="gae2">content</div>
....
<div id="gaeN">content</div>

and be able to select all "engN" or "gaeN" div's and set the style"display:" atttribute accordingly??

seamus · 27-06-2006 12:09pm

This best done using a server-side script - you only show the relevant language, but it can be done. Your friend is the getElementsByTagName method.

<script language="Javascript">
     	function Hide(divID) {
		parentDiv = document.getElementById(divID);
		subdivs = parentDiv.getElementsByTagName("DIV");
		for(i = 0; i < subDivs.length; i++) {
			subDivs[i].display = "none";
		}
	}
</script>

<div id="engText">
      <div id="eng1" >content</div>
      <div id="eng2">content</div>
      ....
      <div id="engN">content</div>
</div>
<div id="gaelText">
      <div id="gae1">content</div>
      <div id="gae2">content</div>
      ....
      <div id="gaeN">content</div>
</div>

To hide the Irish content, you just call hide("gaelText")
That's a simple example just to demonstrate. You could clean it up and make it work better.

Eoin · 27-06-2006 12:11pm

This is very rough, and Server Side as Seamus said, is probably better - but here you go all the same:

Edit: bollocks, beaten to it!

<html>
	<head>
		<title>Test</title>
		<script type="text/JavaScript">
			function showDivs(sLang)
			{
				var alldivs = document.getElementsByTagName("div");

				var sDivName;
				for (var i = 0; i < alldivs.length; i++)
				{
					sDivName = alldivs[i].id;
					document.getElementById(sDivName).className = 'hideMe';
					if (sDivName.indexOf(sLang) > 0)
					{
						document.getElementById(sDivName).className = 'showMe';
					}
				}
			}
		</script>
		<style type="text/css">
			.showMe
			{
				display: display;
			}

			.hideMe
			{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="lang_eng1" class="showMe">Eng 1</div>
		<div id="lang_eng2" class="showMe">Eng 2</div>
		<div id="lang_eng3" class="showMe">Eng 3</div>
		<div id="lang_eng4" class="showMe">Eng 4</div>
		<div id="lang_eng5" class="showMe">Eng 5</div>
		<div id="lang_eng6" class="showMe">Eng 6</div>

		<div id="lang_gael1" class="hideMe">Gael 1</div>
		<div id="lang_gael2" class="hideMe">Gael 2</div>
		<div id="lang_gael3" class="hideMe">Gael 3</div>
		<div id="lang_gael4" class="hideMe">Gael 4</div>
		<div id="lang_gael5" class="hideMe">Gael 5</div>
		<div id="lang_gael6" class="hideMe">Gael 6</div>
		<input type="button" onclick="showDivs('gael')" value="show Gael">
		<input type="button" onclick="showDivs('eng')" value="show Eng">
	</body>
</html>

Scruff · 27-06-2006 2:34pm

Thanks lads. went with eoin_s solution, works like a charm.
/me clicks at space where add karma icon used to be.:p

Eoin · 27-06-2006 2:46pm

Scruff wrote:

Thanks lads. went with eoin_s solution, works like a charm.
/me clicks at space where add karma icon used to be.:p

No worries

Seamus' one is a bit more elegant, as you only have to show or hide one parent div though.

seamus · 27-06-2006 2:52pm

Well actually I have implemented this in other guises (mainly for menus), and instead of just showing/hiding one menu, it generally hides all of the divs except for the one that I've just clicked on, and then shows or hides that one, depending on its current state

Not so elegant.

show and hide multiple <div>

Comments