altering a class thats used more than once on a page

[JulianUK]

Hi

If I have a class, and I use it in more than one place, I can't then seem to change the attributes of that class later on, using Javascript.

If the class is only used in one place, the script changes the attribute fine.

Am I trying something fundamentally wrong or is there a way around this?

Thanks

Julian
>>>>>>
e.g.

<!--
div#x {display: inline}
-->

<div id=&quot;x&quot;>
<a href=&quot;&quot;>Opt 1</a>
<a href=&quot;&quot;>Opt 2</a>
</div>

...other code...

<div id=&quot;x&quot;>
<a href=&quot;&quot;>Opt 3</a>
<a href=&quot;&quot;>Opt 4</a>
</div>

then somewhere my javascript will change the &quot;display&quot; property later on.

 

[gacaccia]

this may or may not be related to your problem, but i just wanted to point out a mix-up in terminology. your css is using id's, not classes. if you want to use a class, then your code will need to look like this...

<!--
div.x {display: inline}
-->

and...

<div class=&quot;x&quot;>
<a href=&quot;&quot;>Opt 1</a>
<a href=&quot;&quot;>Opt 2</a>
</div>

glenn

 

[JulianUK]

Yes, i'd been juggling things around but have basically tried all combinations I think possible! It was only an oversight in the example i gave, not in my actual application of the problem.

thanks anyway.

I've given up with it. I'm going to have to use an unpretty work around. But i've spent too much time on it already - you know how these things become obsessive?!

Julian

 

[starway]

Not sure what are you talking about.
Is this what you want:

function changeStyle(element) {
document.getElementById(element).style.display = &quot;[desired value]&quot;;
}

You should call it like this:
<a href=&quot;#&quot; onclick=&quot;changeStyle('x')&quot;>change</a>
where x is the ID of the content block.

 

[JulianUK]

Yes, granted, not a well contructed question.

Basically, I want to alter a class definition in Javascript.

in my particular application, I want to hide all elements which have a class of &quot;subm&quot;. So, using id's is not suitable as they have to be unique of course.

Can I alter a class 'on the fly'?

Starway - That statement you showed, will be of help in another area - thanks!

Many Thanks

Julian

 

[AnakinPt]

what are you trying to do?

i suppose you have something with a class and after clicking something, you want to change the class of something

why you don't have 2 classes (text and textbold, f.e.) and then

<p id=&quot;texttochange&quot; class=text>xpto</p>

Then when clicking something
window.document.getElementById('texttochange').class='textbold';

Just a hint. Not tested.
Anikin
Hugo Alexandre Dias
Web-Programmer
anikin_jedi@hotmail.com

 

[JulianUK]

I can't use 2 classes, as the class is used in more than one element on the doc. When I alter the class (e.g. display=none) I want all elements of this class to be hidden.

Possible or not?

My application is simply a menu structure. Main options (level 1) remain visible all the time. The submenus from each of these only appear when each is clicked.

I want to give all the submenus the same class, so that the first thing that happens when a level 1 menu option is clicked is to hide all submenus prior to displaying the correct one just clicked.

I have acheived it by calling a function that hides them all by ID individually, but thats not pretty having to refer to each one by name.

Any help would be great.

Thanks

Julian

 

[AnakinPt]

why don't you use div's?

look something like this:

<a href=&quot;&quot; class=menu1 onclick=&quot;openLayer(menu1)>Menu level 1</a>
<div name=menu1 style=&quot;display=none&quot;>
<a href=&quot;&quot; class=menu2>Menu level 2</a>
<a href=&quot;&quot; class=menu2>Menu level 2</a>
<a href=&quot;&quot; class=menu2>Menu level 2</a>
...
</div>
<a href=&quot;&quot; class=menu1 onclick=&quot;openLayer(menu2)>Menu level 1</a>
<div name=menu2 style=&quot;display=none&quot;>
<a href=&quot;&quot; class=menu2>Menu level 2</a>
<a href=&quot;&quot; class=menu2>Menu level 2</a>
<a href=&quot;&quot; class=menu2>Menu level 2</a>
...
</div>
...

function openLayer(layer){
document.menu1.style.display=(layer=='menu1')?'block':'none';
document.menu2.style.display=(layer=='menu2')?'block':'none';
...

}

Hope this helps you doing what you want.
Anikin
Hugo Alexandre Dias
Web-Programmer
anikin_jedi@hotmail.com

 

[JulianUK]

Hi Anikin
that does indeed acheive what I want, and is how I have implemented it. However, it does not do it HOW I want.

I wanted to avoid hiding individual items, but to hide them in one statement by setting the class 'display' tag to none. They would all share the same class you see.

It doesn't work if I use the said class in more than one menu item, but works fine if the class is used just once - which defeats the object!

I've come to the conclusion that it cannot be done.

thanks

Julian