1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[HELP] How To Show/Hide Text Using JavaScript Toggle Method

Discussion in 'HTML & JavaScript' started by west13, Jun 5, 2013.

  1. west13

    west13 Junior Member

    Joined:
    May 31, 2012
    Messages:
    173
    Likes Received:
    63
    I was looking for something and found this:

    Code:
    <script language="javascript">
    function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "show";
    }
    else {
    ele.style.display = "block";
    text.innerHTML = "hide";
    }
    } 
    </script>
    Code:
    <a href="javascript:toggle();" id="displayText">Show/Hide</a>
    <div id="toggleText" style="display: none;">This is Hidden Text</div>
    The problem is that I can't use it on more pages... I need to use it on every single page of a WP site.

    Anyone has a code that I can use or a solution. Pls...
    Thank you

    Note:

    Someone suggested this:
    Code:
    Ya know, if you just pass the function some arguements you don't have to  create multiple functions (i.e.- toggle2(), toggle3(), etc...)
    
    So the function should look like this instead:
    
    function toggle(tog, dis){
    var ele = document.getElementbyId(tog);
    var text = document.getElementbyId(dis);
    if (ele.style.display == "block"){
    ele.style.display = "none";
    text.innerHTML = "Show/Hide";
    }
    else{
    ele.style.display = "block";
    text.innerHTML = "hide";
    }
    }
    
    Then  you just increment the id wherever you want to use the function. This  way it won't clog up your header with tons of repeated js functions. DRY  (Don't Repeat Yourself)
    But I need a step by step example because I'm not too advanced in programming
     
    Last edited: Jun 5, 2013