[RESOLVED] Assignment question

I don’t know if this is a CSS or JS question, so sorry if I post incorrectly.

If I create a CSS rule as:

[code=php]
<style type=”text/css”>
div.grp { display:none; }
</style>
[/code]

and then later initialize a section as:

[code=php]
<div id=”SH” class=”grp”>Information to show/hide</div>
[/code]

and toggle the display with a button like:

[code=php]
<button onClick=”Toggle(‘SH’)”>Show / Hide</button>
[/code]

The function to Show / Hide is defined as:

[code=php]
function Toggle(Info) {
CState = document.getElementById(Info);
if (CState.style.display == “none”) { CState.style.display = “block”; }
else { CState.style.display = “none”; }
}
[/code]

With the definitions out of the way, now comes my questions:
1. The contents of the <div> tag are initially not hidden. Why? I thought they would be by the <style> definitions
2. With the above, the very 1st click on the button does nothing,
but all subsequent clicks work as desired in that the contents of the <div> tag are toggled as hidden or displayed. Why? I thought the initial test would see “none” and change to “display”.
3. What don’t I understand about the CSS rules that if I change the <div> to this:

[code=php]
<div id=”SH” class=”grp” style=”display:none”>Information to show/hide</div>
[/code]

all works perfect with the initial contents of the <div> tag initially not shown and then are displayed with the 1st button click? What am I not understanding about the logic or set-up of the CSS style or tag definitions?

Thank you for any enlightnment.

Also in #CSS _↴