Email conversation
| From | Matt Larkins |
|---|
| To | Me |
|---|
| Subject | Toggle function for showDiv / hideDiv |
|---|
| Date | 20 February 2007 16:07 |
|---|
Hi,
Firstly, excellent website - Thanks very much for your help.
I've searched your site but can't find an answer....
Is there a 'toggle' function that allows the same link to either show or
hide the div, without using mouseOver Mouse Out?
ie, if the Div is now visible, the same link will then hide it, whereas
previously when clicked it showed it.
Regards
Matt
PS I found your older show/hide layers but it appear the compatibility
checks are older as it would work (Safari 2.04), whereas the functions below
do.
function showDiv(divID_as_a_string) {
var myReference = getRefToDiv(divID_as_a_string);
if( !myReference ) { window.alert('Nothing works in this browser');
return; }
if( myReference.style ) { myReference.style.visibility = 'visible'; }
else {
if( myReference.visibility ) { myReference.visibility = 'show'; }
else {
window.alert('Nothing works in this browser'); return; } }
}
function hideDiv(divID_as_a_string) {
var myReference = getRefToDiv(divID_as_a_string);
if( !myReference ) { window.alert('Nothing works in this browser');
return; }
if( myReference.style ) { myReference.style.visibility = 'hidden'; }
else {
if( myReference.visibility ) { myReference.visibility = 'hide'; }
else {
window.alert('Nothing works in this browser'); return; } }
}
| From | Me |
|---|
| To | Matt Larkins |
|---|
| Subject | Re: Toggle function for showDiv / hideDiv |
|---|
| Date | 23 February 2007 22:24 |
|---|
Matt,
> Is there a 'toggle' function that allows the same link to either show or
> hide the div, without using mouseOver Mouse Out?
The script itself doesn't, but it's fairly easy to do. Just store a variable
that says its current state (it's easier than always checking for it), use
that to work out if you need to show it or hide it, and invert that variable
state every time the link is clicked.
<script type="text/javascript">
var toggled1 = false;
function toggleMe() {
if( toggled1 ) {
showDiv('foo');
} else {
hideDiv('foo');
}
toggled1 = !toggled1;
}
</script>
...
<a href="javascript:toggleMe();">test</a>
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/