How to Toggle text to display On or Off (not just show and hide)

Printable View

01-23-2009, 08:19 PM
techie35

How to Toggle text to display On or Off (not just show and hide)

HI,

Hopefully there is something simple I am missing here.
What I have is this
<div id="tutorial" >Tutorials:</div> <div>On </div>

what I would like is for it to do is when you click
<div id="tutorial" >Tutorials:</div>
the "On" becomes "Off".

So that it toggles between the two pieces of text showing only one at a time.

When On is is visible Off is invisible,
Tutorials: ON

When Off is visible On is invisible
Tutorials: OFF

We have the backend working where when it is clicked it turns tutorials on or off for the user in the CMS but the text does not reflect the change in the UI.

I have found a ton of examples of showing and hiding text using display or visibility with style sheets. But I have not been successful in finding something about toggle between two pieces of text.

Here is the example I have been working off of:

http://bonrouge.com/br.php?page=togglit

I took and tested in the setup:

<script type="text/javascript">

function toggleNext(el) {
var next=el.nextSibling;
while(next.nodeType != 1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
}

function toggleNextById(el) {
var ccn="clicker";
var clicker=document.getElementById(el);
clicker.className+=" "+ccn;
clicker.onclick=function() {toggleNext(this)}
toggleNext(clicker);
}

window.onload=function() {toggleNextById('tutorial')}
</script>
----------html--------------------
<div id="tutorial" >Tutorials:</div> <div>On </div>
--------------------------

Since I am more UI than coder. I tried to do the toggle by using CSS to layer the two text pieces and only show at time but that was a disaster.

If anyone has any suggestions, recommendations or any feedback:confused: how this can be done. I would greatly appreciate it.

Thanks so much!
:confused:
01-24-2009, 02:37 AM
Hud4007

try this

Code:

<head> <script> function changeStatus() { a=document.getElementById('status').innerHTML; if (a=='OFF') { a='ON'; } else { a='OFF'; } } </script> </head> <body> <div id="tutorial" onclick="changeStatus()">Tutorials:</div> <div id="status">ON</div> </body>

This example assumes that ON is default.
01-24-2009, 10:05 AM
techie35

Thank you! But is there something I am not doing right?

Hud4007,

Thank you so much for helping me out and the quick reply. One question. I tried it out and the text is not changing. Am I not implmenting the onclick correctly?

Here is it is http://fuzzbert.org/test.html

If you can just let me if there is something I am missing.

Thank you again so much for helping.

Cheers,
Techie35
:confused:
01-24-2009, 10:15 AM
ZeroKilled

the provided script is wrong, reference to the element is lost. here is the correct script:

Code:

<script> function changeStatus(){ var statusElem = document.getElementById('status'); if (statusElem.innerHTML == 'OFF'){ statusElem.innerHTML = 'ON'; }else{ statusElem.innerHTML = 'OFF'; } } </script>
01-24-2009, 09:45 PM
techie35

Thank you! You ROCK! This works great!

Hi ZeroKilled,

Thank you, thank you, thank you!!! This works perfectly. Really appreciate you help.

May you have a wonderful weekend!!

Cheers,
Techie35
:)
03-25-2009, 10:03 AM
kSabah

Thank You!

Hard to find such professional coding. Your answer saved me a lot of time.

Thanks again!