DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Chara Miteo

Chara has posted 27 posts at DZone. View Full User Profile

Toggling Elements with JavaScript

11.04.2012

| 2044 views |

    <script type="text/javascript">
/* Source: http://www.apphp.com/index.php?snippet=javascript-toggle-elements */
    function toggle(id, id2){  
        var toggle_one = document.getElementById(id);  
        var toggle_two = document.getElementById(id2);  
        if(toggle_one.style.display == "block"){  
            toggle_one.style.display = "none";  
            toggle_two.innerHTML = "Show";  
        }else{  
            toggle_one.style.display = "block";  
            toggle_two.innerHTML = "Hide";  
        }  
    }
    </script>
     
    <a href="#" id="tlink" onclick="toggle('comments', 'tlink');">Show</a> Comments<br><br>  
    <div id="comments" style="display:none;padding 10px;">Now you can see the comments</div>

This function allows you to pass two variables that represent ID of two elements on your page. What you click on one of them it hide it and shows another one.

Tags: