×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

Switching between multiple hidden <div> tags

Switching between multiple hidden <div> tags

Switching between multiple hidden <div> tags

(OP)
After hours of work,I was finally able to get the first step of the script I needed functional. This displays a select box and the value that you choose will turn the div from display:none to display:block. This is good,but I need one more funciton that I cannot figure out. I only want 1 div displaying at a time, and with the function I have right now, if you select a second option then you now have 2 showing, and select another now it is 3. I need it to close the current open div, and then display the newly selected. Here's the code:

CODE

<head>
<script type="text/javascript">
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
</script>
 </head>

<FORM NAME="myform">
<SELECT NAME="mylist" onChange="toggleLayer(document.myform.mylist.value)">
<OPTION VALUE="m1">1
<OPTION VALUE="m2">2
<OPTION VALUE="m3">3
</SELECT>
</FORM>

<div id="m1" style="display: none">
this is stuff M1</div>
<div id="m2" style="display: none">
this is stuff M2</div>
<div id="m3" style="display: none">
this is stuff M3</div>


If anyone can offer me any help I would be grateful. Thank you!

RE: Switching between multiple hidden <div> tags

I struggled with this one on a number of applications as well.  You need to set the other divs to display = none.  You may be able to come up with an array of all div names and construct a loop that will turn off the display of all others except the one passed to the function.  My apps had a static number of divs so I found it easiest to explicitly turn off the displays in the function.  Best practice is probably the array/loop method so that it will handle any number of divs.

RE: Switching between multiple hidden <div> tags

(OP)
In case anyone needs something like this ....
Here is the solution:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

    var prevDiv = "";

    function toggle(nDiv){

        if (nDiv == ""){return}
        if (prevDiv != "")
            {
             document.getElementById(prevDiv).style.display = "none";
            }
        document.getElementById(nDiv).style.display = "";
        prevDiv = nDiv;
    }
    
</script>
<style type="text/css">

     body {background-color:#eae3c6;margin-top:60px}
     form {width:300px;margin:auto}
     fieldset {width:300px;background-color:#f0fff0;border:1px solid #87ceeb}
     legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
     label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
     select {font-family:tahoma;font-size:10pt;display:block;margin:auto}
    .submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
    
</style>
</head>
    <body>
        <div id="m1" style="display:none">this is stuff M1</div>
        <div id="m2" style="display:none">this is stuff M2</div>
        <div id="m3" style="display:none">this is stuff M3</div>
        <form method="post" action="">
           <fieldset>
            <legend>Toggle</legend>
                <select name="divList" onchange="toggle(this.value)">
                    <option value=""> Make a Selection </option>
                    <option value="m1"> M1 </option>
                    <option value="m2"> M2 </option>
                    <option value="m3"> M3 </option>
                </select>
            <input type='submit' name='submit' value="Submit" class='submitBtn'>
           </fieldset>
        </form>
    </body>
</html>

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close