Forum Moderators: open

Message Too Old, No Replies

Multile IDs on a single page?

I need to show/hide multiple items using Javascript.

         

snair

4:41 pm on Nov 25, 2006 (gmt 0)

10+ Year Member



When I was learning CSS, I was told that IDs are only supposed to appear once on a page.

The idea is that an ID represents a unique item, so what if I have multiple items that are supposed to be represented by one item?

For example, let’s suppose I’m creating a CMS and on my “Create new article” page, I have this button called, “Advanced.”

And by clicking the “Advanced” button, it will use javascript to show all items that are in <div id="Advanced"> (basically a simple show/hide javascript)

Also, I can’t group all the “Advanced” stuff together because they are going to be in different fieldsets.

So in this case, would it be ok to have only multiple IDs on this page? Or does that just not work?

whoisgregg

7:30 pm on Nov 25, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It just doesn't work. What you can do is wrap all your "advanced" stuff in divs with a specific class then loop through the divs in your form and test for that className:

<html>
<head>
<title>Toggle Advanced</title>
<style type="text/css">
<!--
.advanced { display: none; }
-->
</style>
<script type="text/javascript">
<!--
var advancedVisible = false;
function toggleAdvanced(){
var the_divs = document.getElementById('the_form').getElementsByTagName("DIV");
var new_state = '';
if(advancedVisible){
new_state = 'none';
advancedVisible = false;
} else {
new_state = 'block';
advancedVisible = true;
}
for(var i in the_divs){
var cur = the_divs[i];
if(cur && cur.className=='advanced'){
cur.style.display = new_state;
}
}
}
//-->
</script>
</head>
<body>
<p><a href="#" onclick="toggleAdvanced();return false;">Toggle Advanced Options</a></p>
<form action="" method="post" id="the_form">
<input type="text" name="simple1" value="" />
<div class="advanced"><input type="text" name="advanced1" value="" /></div>
<input type="text" name="simple2" value="" />
<div class="advanced"><input type="text" name="advanced1" value="" /></div>
</form>
</body>
</html>

snair

1:43 am on Nov 26, 2006 (gmt 0)

10+ Year Member



oh wow! That's amazing! Thanks for that, I think I'm beginning to understand javascript better now, but it still gives me major headaches!

Thank you so much!

whoisgregg

1:51 am on Nov 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Happy to help. :)