Toggling DIVs

[Darkmatter5]

<style type="text/css"> 
#site_admin, #user_admin, #news_man, #data_man {
    display: none;
} 
</style>
<script type="text/javascript">
function toggle(thediv) {
    var el=document.getElementById(thediv);
    if(el.style.display!='none') { el.style.display='none'; }
    else { el.style.display=''; }
}
</script>

<input type="radio" name="toggledivs" onclick="toggle('site_admin');" />Site Administration
<input type="radio" name="toggledivs" onclick="toggle('user_admin');" />User Administration
<input type="radio" name="toggledivs" onclick="toggle('news_man');" />News Management
<input type="radio" name="toggledivs" onclick="toggle('data_man');" />Data Management

<div id="site_admin">test</div>
<div id="user_admin">test</div>
<div id="news_man">test</div>
<div id="data_man">test</div>

 

So upon opening the page he divs should be hidden and when you click a radio button that div should appear.  They do start hidden, but when you click the buttons nothing happens.  Any ideas why?

[rhodesa]

you have to use inline styles...or have an onload event that hides them with JS

 

<script type="text/javascript">
function toggle(thediv) {
    var el=document.getElementById(thediv);
    if(el.style.display!='none') { el.style.display='none'; }
    else { el.style.display=''; }
}
</script>

<input type="radio" name="toggledivs" onclick="toggle('site_admin');" />Site Administration
<input type="radio" name="toggledivs" onclick="toggle('user_admin');" />User Administration
<input type="radio" name="toggledivs" onclick="toggle('news_man');" />News Management
<input type="radio" name="toggledivs" onclick="toggle('data_man');" />Data Management

<div id="site_admin" style="display:none;">test</div>
<div id="user_admin" style="display:none;">test</div>
<div id="news_man" style="display:none;">test</div>
<div id="data_man" style="display:none;">test</div>

[Darkmatter5]

Perfect! It worked! Thanks!

[Darkmatter5]

I actually have another question that has come up since I got this code working.

 

I have a div that is always displayed above all the hidden divs regardless of if they are on or off.  However when I toggle a div on the constant div gets shifted up.  How can I make it keep it's position.  Here's the code.

 

<script type="text/javascript">
function toggle(thediv) {
    var el=document.getElementById(thediv);
    if(el.style.display!='none') { el.style.display='none'; }
    else { el.style.display=''; }
}
</script>

<input type="checkbox" name="toggledivs" onclick="toggle('site_admin');" />Site Administration
<input type="checkbox" name="toggledivs" onclick="toggle('user_admin');" />User Administration
<input type="checkbox" name="toggledivs" onclick="toggle('news_man');" />News Management
<input type="checkbox" name="toggledivs" onclick="toggle('data_man');" />Data Management

<td>
  <div id="warning" style="width: 100%; text-align: center;">
    <span class="warning_text">WARNING!!</span><br>Some things you change on this page can completely<br>break the site. Be mindful of what you change and delete!
  </div>
  <div id="site_admin" style="display:none;">test</div>
  <div id="user_admin" style="display:none;">test</div>
  <div id="news_man" style="display:none;">test</div>
  <div id="data_man" style="display:none;">test</div>         
</td>

 

The warning div is the div that shifts.

[rhodesa]

i don't get any "shifting". what does the stylesheet for this look like?