[SOLVED] div show/hide with buttons

Darkmatter5 · January 27, 2009

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!

Darkmatter5 · January 27, 2009

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?

bobleny · January 28, 2009

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....

Psycho · January 28, 2009

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>

Darkmatter5 · January 28, 2009

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]

Psycho · January 28, 2009

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

Darkmatter5 · January 28, 2009

Perfect thanks!

bobleny · January 28, 2009

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!

Psycho · January 28, 2009

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

bobleny · January 28, 2009

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....

Psycho · January 28, 2009

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.

Sign In

[SOLVED] div show/hide with buttons

Recommended Posts

Darkmatter5

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information