www.webdeveloper.com
Results 1 to 6 of 6

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

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    11

    Question 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 how this can be done. I would greatly appreciate it.

    Thanks so much!

  2. #2
    Hud4007's Avatar
    Hud4007 is offline »Err«Restoring Link..Done
    Join Date
    Jan 2009
    Posts
    29
    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.
    Last edited by Hud4007; 01-24-2009 at 03:42 AM.

  3. #3
    Join Date
    Dec 2008
    Posts
    11

    Question 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

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    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>

  5. #5
    Join Date
    Dec 2008
    Posts
    11

    resolved 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

  6. #6
    Join Date
    Mar 2009
    Posts
    1

    Thumbs up Thank You!

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

    Thanks again!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles