Hide/show dynamic divs

hacking_mike · March 7th, 2010, 03:08 PM

With asp I generate a form with some divs. Some of these divs are hidden

Code:

<div class=" &  chr(34) & branchId & chr(34) & "style=""display: none;"">

this works. The class will be a number (lets say '1'). Now when I select something from a dropdown I want to show all divs with the class '1'

This is what I have:

Code:

function showDiv(test) { 
1	var obj = document.getElementsByClassName("1") 
2	alert("bb")
3	for(i=0;i<obj.length;i++) { 
4			alert("cc")
	}

It does not work because I get the error:
"This method is not supported" on line 1

How can I achieve this?

alliancejhall · March 8th, 2010, 11:01 AM

Are these the only div that will have a class on them? if so then you can just use getElmentsByTagName('div') then check if they have a className at all and if they do then show/hide them. But obviously that won't work if all your divs have class styling. What is the range of your class names? is it 1-10 1-100 1-infinity? You could still do a getElementsByTagName('div') and check that their className meets the requirements of the class name?

Just some thoughts let us know if you have any more info and we may be able to give you a better answer.

alliancejhall · March 8th, 2010, 11:08 AM

You could also just assign these divs a special id that is also the branchID

Code:

<div id='div" & branchId & "' class=" &  chr(34) & branchId & chr(34) & " style=""display: none;"">

Then look for all divs and see if they have the div ID?

Code:

function showDiv(test) { 
    var obj = document.getElementsByTagName('div') 
    alert("bb")
    for(i=0;i<obj.length;i++) 
      { 
       if(obj[i].id.indexOf('div')<0)
         {
            alert("cc")
         }
      }

hacking_mike · March 8th, 2010, 02:50 PM

Now i have this

Code:

"<div id='div" & branchId & "' class=" &  chr(34) & branchId & chr(34) & " style=""display: none;"">"

In my case this means that I have two divs with the id 'div1' However, with this function it works

Code:

 
function showDiv(mik) { 
var div2show = 'div' + mik.options(mik.selectedIndex).value	
var obj = document.getElementsByTagName('div') 
    for(i=0;i<obj.length;i++) 
      { 
       if (obj[i].id == div2show)
	{
	obj[i].style.display = 'block'; 
	}
      }
}

It works but is it ok so or can i get problems with the 'same id' issue?

Old Pedant · March 9th, 2010, 05:54 PM

It's a bad idea to use the same ID for mutiple objects. It can work, but it can get you in trouble. document.getElementById( ) behaves differently in different browsers when there are multiple objects with the same id., for example.

And getElementsByClassName is not supported in all browsers, which is surely why you got the error from it.

But I'd still use class name instead of id for your purposes. I'd also *NOT EVER* use just a number as a class name or id. At least use a letter prefix. And, unless you have a really good reason, don't use Response.Write to create HTML with little actual ASP content. So:

Code:

' break out of ASP:
%>
<div class="C<%=branchId %>" style="display: none;">
,,,

And then:

Code:

function showDiv(mik) 
{ 
    // parens with options( ) only works in MSIE!!!  Use [ ]
    var c2show = 'C' + mik.options[mik.selectedIndex].value 
    var divs = document.getElementsByTagName('div');
    for( i=0; i<divs.length; i++ ) 
    {
        var div = divs[i];
        div.style.display = ( div.className == c2show ) ? "block" : "none";
    }
}