View Full Version : Changing the styles of all element types

05-23-2005, 06:52 AM
Hey all,

I've little Javascript experience and I've come across this hurdle.

What I want to do:

I've a page that is being generated by PHP. PHP will create a dynamic number of
div elements, all with a common class but with a unique div id. AND a corresponding table of contents entry ie:

Table of contents:
<div class='subject' ID='_subject0' onClick="toggleDisplay('_fnote0')">....</div>
<div class='subject' ID='_subject1' onClick="toggleDisplay('_fnote1')">....</div>
<div class='subject' ID='_subjectN' onClick="toggleDisplay('_fnoteN')">.....</div>

Full Note
<div class='full_note' ID='_fnote0'>......</div>
<div class='full_note' ID='_fnote1'>......</div>
<div class='full_note' ID='_fnoteN'>......</div> where N can be any number >= 0

There is a css style of div.full_note {position:absolute; display:none} therefore all Full Note divs are hidden on load of the page.

I have written a javascript function called toggleDisplay(obj) which changes the display attribute of the style to block on the Full Note items.

I need to add the functionality of making sure all the other, except the element in question (obj), have their display attributes to "none".

I know this could be hardcoded if I had a static amount of subjects and full notes but since it will be full dynamic I need to find out how to get Javascript to deal with this constantly changing amount of elements.

Any direction and help will be seriously appreciated.


05-23-2005, 07:45 AM
Try this:

function toggleDisplay(id){
var div, suffix=0;
while (div=document.getElementById("_fnote"+(suffix++))){
if (div.id != id){
div.style.display = "none" ;
else {
div.style.display = (div.style.display=="block") ? "none" : "block";