show hide divs - show last state upon reload/post

[ll]

I'm currently working on a form which consists of a show and hide
javascript. The toggle works fine, although when I click on submit, I
would like the page to reload with the toggle (show/hide) div in the
same state it was before being submitted. E.G. If the div was
visible, I'd like for it to be visible upon return.
Here's the script I'm currently using - thanks for any help,
Louis

--------------------------------------------

<script language="javas cript" type="text/javascript">
function WM_toggle(id){
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getEl ementById){
if(document.get ElementById(id) .style.display == 'none'){
document.getEle mentById(id).st yle.display = 'block';
} else {
document.getEle mentById(id).st yle.display = 'none';
}
return false;
}
}
</script>

[Erwin Moller]

Re: show hide divs - show last state upon reload/post

ll schreef:

I'm currently working on a form which consists of a show and hide
javascript. The toggle works fine, although when I click on submit, I
would like the page to reload with the toggle (show/hide) div in the
same state it was before being submitted. E.G. If the div was
visible, I'd like for it to be visible upon return.
Here's the script I'm currently using - thanks for any help,
Louis
>
--------------------------------------------
>
<script language="javas cript" type="text/javascript">
function WM_toggle(id){
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getEl ementById){
if(document.get ElementById(id) .style.display == 'none'){
document.getEle mentById(id).st yle.display = 'block';
} else {
document.getEle mentById(id).st yle.display = 'none';
}
return false;
}
}
</script>

Hi,

First, that code is not recommended (at least not by me).
Why don't you simply use getElementById( )??
Also, stop using the language="javas cript".

Your function could look like:

<script type="text/javascript">
function showHide(someID ){
var theEldisp = document.getEle mentById(someID );
theEldisp.style .display=(theEl disp.style.disp lay=='none')?'b lock':'none';
}
</script>

<span onClick="showHi de('test');">cl ick here to toggle On and off</span>
<hr>
<div id="test" style='display: block'>
your hiding div content.<br your hiding div content.<br>
</div>


----------------
To your question concerning remembering the last state:
Since you have a fresh page, the old values are gone.
So you have to find some way to remember them.

Two ways to do this:
1) Clientside solution:
-store the values in a frameset.
When you post a form in a window in a frameset, only that window is
refreshed, not the window holding the frameset definition.
So you can store here the last value of the div.
Then, if the page loads, check let your new page ask the frameset for
the last value and act accordingly ('none' or 'block')

2) Post the state to your processing script, and let the response write
the right value.
If you control the server too, you can easily add a hidden field to your
form, set its value when somebody click the toggle.
Now if the form is received by the server, do you normal things, and
check for this hidden value, and in the output simply set it right
immediately.
So your output will be (on PHP for example):

<?php
$dispStyle = ((isset($_POST['lastdisp'])) ? $_POST['lastdisp']: 'none');
?>
<div id="test" style='display: <?php echo dispStyle; ?>'>
your hiding div content.<br your hiding div content.<br>
</div>


Hope that helps.
Personally I prefer the second solution because that doesn't involve
extra frames.

Regards,
Erwin Moller