CSS - Can I do this?

[Shanksta]

I am using JS to hide and display divs. In order to set the initial stage to be hidden I am using CSS to do display: none...

Now what I want to do is rather than making an entry for each item is simply make one css entry for #hidden and set that display to none, from there I want to have divs with an id of hidden_XXXXX where XXXXX is a specific identifier for the JS to use... can I do this?

 

[LFI]

Set the CLASS parameter of the DIVs you want to group together to the same thing and define that class in the STYLE section with display:none. Give each DIV their own unique id for referencing and don't worry about the hidden_ on each one.

Does that make sense?

--Dave

 

[Shanksta]

How would I get that class in JavaScript?

Div is GetElementById... and class?

 

[BabyJeffy]

I would suggest you wrap all the DIVs that you want to show/hide in a DIV (and then you can give that single DIV an id). Then use the following CSS to hide all the DIVs contained within:

#yourEnclosingDivContainerID div {display:none;}

You can then style the single (initial) DIV that you want visible at page load by using the following CSS:

#yourEnclosingDivContainerID div#yourInitiallyVisibleDivID {display:block;}

In the above examples you would adjust to use your own IDs, but it would not require you add any classes... and hopefully not too much CSS

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[LFI]

Interesting, Jeff. While we're on it, can you tell me when you would use display:inline rather than display:block[/i]? Maybe it doesn't matter for DIVs since they force a new-line anyway.

Comments?

Thanks!

--Dave

 

[cLFlaVA]

getting the class in javascript:

<style type="text/css">
div.classOne {
    display: block;
}

div.classTwo {
    display: none;
}
</style>

<div id="myDiv" class="classOne">Hi there</div>
<input type="button" onclick="[blue]document.getElementById('myDiv').className='classTwo';[/blue]" value="Click Me" />

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]