[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

    May 31, 2012
    Likes Received:
    I was looking for something and found this:

    <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";
    <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


    Someone suggested this:
    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";
    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