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:


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)}

window.onload=function() {toggleNextById('tutorial')}
<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 how this can be done. I would greatly appreciate it.

Thanks so much!