Jump to content

[SOLVED] div show/hide with buttons


Darkmatter5

Recommended Posts

I have a page with 3 divs "step1, step2 and step3".  Step1 has a button that says "Goto step2->", step2 has two buttons that say "<-Goto step1" and "Goto step3->" then step3 has two buttons that say "<-Goto step2" "Finish".  Steps2 and 3 a initially hidden, but step1 is not.  When "Goto step2->" is clicked on step1 I need to hide step1 and display step2.  I think the rest speaks for itself on what I'm needing. So how can I get about displaying and hiding various divs based on what button is clicked?

 

Thanks!

Link to comment
Share on other sites

Here's the code I'm attempting to work with.

 

<style type="text/css">
#step1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
}
#step2 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 500px;
}
#step3 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 500px;
}
</style>

<script type="text/JavaScript">
function togdiv(id,tog) {
    tog=document.getElementById(tog);
    cur=document.getElementById(id);
    tog.style.display='';
    cur.style.display='none';
}
</script>

<div id="step1">
  <input type="submit" value="Goto step 2 ->" onclick="togdiv(id_of_current_div,'step2');>
</div>
<div id="step2">
  <input type="submit" value="<- Goto step 1" onclick="togdiv(id_of_current_div,'step1');"> <input type="submit" value="Goto step 3 ->" onclick="togdiv(id_of_current_div,'step3');>
</div>
<div id="step3">
  <input type="submit" value="<- Goto step 2" onclick="togdiv(id_of_current_div,'step2');> <input type="submit" value="Finish">
</div>

 

Any ideas?

Link to comment
Share on other sites

Well, I don't understand exactly why you want to do that, but this is how I would do it:

<html>
<head>
	<script type="text/JavaScript">
		<!--
			function Hide(field)
			{
				if((field == "1") || (field.id == "1"))
				{
					document.getElementById("step1").style.display = "block";
					document.getElementById("step2").style.display = "none";
					document.getElementById("step3").style.display = "none";
				}

				if(field.id == "2")
				{
					document.getElementById("step1").style.display = "none";
					document.getElementById("step2").style.display = "block";
					document.getElementById("step3").style.display = "none";
				}

				if(field.id == "3")
				{
					document.getElementById("step1").style.display = "none";
					document.getElementById("step2").style.display = "none";
					document.getElementById("step3").style.display = "block";
				}

				if(field.id == "4")
				{
					document.getElementById("step1").style.display = "none";
					document.getElementById("step2").style.display = "none";
					document.getElementById("step3").style.display = "none";
				}
			}
			//-->
	</script>

	<title>A Title!</title>
</head>

<body onload="Hide(1)">
	<div id="step1">
		<input type="button" id="2" value="Goto step 2 ->" onclick="Hide(this)" />
	</div>

	<div id="step2">
		<input type="button" id="1" value="<- Goto step 1" onclick="Hide(this)" /> <input type="button" id="3" value="Goto step 3 ->" onclick="Hide(this)" />
	</div>

	<div id="step3">
		<input type="button" id="2" value="<- Goto step 2" onclick="Hide(this)" /> <input type="button" id="4" value="Finish" onclick="Hide(this)" />
	</div>
</body>
</html>

 

Please take better care of your scripting, because there where a lot of errors in the script you posted....

Link to comment
Share on other sites

The first test in that function has an error (it is checking the field object instead of the ID). But there is a simpler way to do all of that with much less code.

 

Tis will alllow you to add or remove div sections withouth having to change the function

 

<html>
    <head>
    <title>A Title!</title>
    <script type="text/JavaScript">
    <!--
        function Hide(fieldID)
        {
            var i = 1;
            while(document.getElementById('step'+i))
            {
                document.getElementById('step'+i).style.display = (fieldID==i++) ? 'block' : 'none';
            }
            return;
        }
    //-->
    </script>
    </head>

    <body onload="Hide(1)">
        <div id="step1">
            Div 1 Content<br>
            <input type="button" id="2" value="Goto step 2 ->" onclick="Hide(this.id)" />
        </div>
        <div id="step2">
            Div 2 Content<br>
            <input type="button" id="1" value="<- Goto step 1" onclick="Hide(this.id)" /> <input type="button" id="3" value="Goto step 3 ->" onclick="Hide(this.id)" />
        </div>
        <div id="step3">
            Div 3 Content<br>
            <input type="button" id="2" value="<- Goto step 2" onclick="Hide(this.id)" /> <input type="button" id="4" value="Finish" onclick="Hide(this.id)" />
        </div>
    </body>
</html>

Link to comment
Share on other sites

Here's the code I came up with LATE last night.  This works more or less, but my radio buttons stay checked after they've been clicked.  So if you click on step 1 then step 2, step 1 stays clicked, but the toggle function works fine.  Attached is a screenshot of the effect.

 

<style type="text/css">
#step1 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 500px;
    padding: 5px;
}
#step2 {
    position: absolute;
    top: 200px;
    left: 0;
    display: none;
    width: 500px;
    padding: 5px;
}
#step3 {
    position: absolute;
    top: 200px;
    left: 0;
    display: none;
    width: 500px;
    padding: 5px;
}
#steps {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 200px;
    border-bottom: 1px dashed;
}
</style>
<script type="text/JavaScript">
function togdiv(thediv) {
    document.getElementById("step1").style.display="none";
    document.getElementById("step2").style.display="none";
    document.getElementById("step3").style.display="none";
    document.getElementById(thediv).style.display="block";
}
</script>
<div id="steps">
<input type="radio" name="toggledivs1" onclick="togdiv('step1');">STEP 1: (required data & description)<br>
<input type="radio" name="toggledivs2" onclick="togdiv('step2');">STEP 2: (systems, publishers & developers)<br>
<input type="radio" name="toggledivs3" onclick="togdiv('step3');">STEP 3
</div>
<div id="step1"><span class="large_text"><b>STEP 1: (required data & description)</b></span><p></div>
<div id="step2"><span class="large_text"><b>STEP 2: (systems, publishers & developers)</b></span><p></div>
<div id="step3"><span class="large_text"><b>STEP 3:</b></span><p></div>

 

Why are the radio buttons staying on??

 

[attachment deleted by admin]

Link to comment
Share on other sites

A radio group must all have the same name. You should also check the first option by default if section 1 will be displayed by default.

 

<input type="radio" name="toggledivs" onclick="togdiv('step1');" checked="checked">STEP 1: (required data & description)<br>
<input type="radio" name="toggledivs" onclick="togdiv('step2');">STEP 2: (systems, publishers & developers)<br>
<input type="radio" name="toggledivs" onclick="togdiv('step3');">STEP 3

Link to comment
Share on other sites

The first test in that function has an error (it is checking the field object instead of the ID).

My script doesn't have an error in it! That was done on purpose to make the script work onload.

 

Could you explain your script, mjdamato?

I don't understand how your while loop breaks, because the condition never changes...

------

 

Glade to here you got your script to work!

Link to comment
Share on other sites

The first test in that function has an error (it is checking the field object instead of the ID).

My script doesn't have an error in it! That was done on purpose to make the script work onload.

 

Could you explain your script, mjdamato?

I don't understand how your while loop breaks, because the condition never changes...

 

My appologies, I recognized the reason for the first test before completing my response, but I forgot to remove that statement.

 

As for the conditin never changing . . . it does:

document.getElementById('step'+i).style.display = (fieldID==i++) ? 'block' : 'none';

 

When you use var++, the variable is first returned and then incremented by one. So, on the first pass it checks if 'fieldID' is equal to the current value of 'i' and then increments 'i' by one.

 

FYI: ++var is slightly different in that it increments the value and then returns it

 

Examples

var foo = 1;
alert(foo); // alerts 1
//foo++, return current value then increment it
alert(foo++); // alerts 1 (foo now equals 2)
alert(foo); // alerts 2
//foo++, increment current value then return it
alert(++foo) // alerts 3 (foo equals 3)
alert(foo); // alerts 3

Link to comment
Share on other sites

Right, I know that....

 

However, I think I figured it out. Though your while loop never goes false, it should eventually go null, which would terminate the loop...

 

On the other hand, the following script works just the same!?

function Hide(fieldID)
{
    var i = 1;
    while("joe")
    {
        document.getElementById('step'+i).style.display = (fieldID==i++) ? 'block' : 'none';
    }
    return;
}

Since joe is always joe, the loop should never end and IE should crash. (Firefox to the rescue!)

 

If you run the modified script, it works fine....  :o

Link to comment
Share on other sites

Though your while loop never goes false, it should eventually go null, which would terminate the loop...

 

Basically yes. But, checking to see if an object exists is good practice anyway. Especially when you get into functions/properties that are different from browser to browser.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.