advanced code snippet search

Posted By

apphp-snippets on 03/03/13


Tagged

javascript elements toggling


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Abiotic


Toggling Elements with JavaScript

 / Published in: JavaScript
 

URL: http://www.apphp.com/index.php?snippet=javascript-toggle-elements

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.

Expand | Embed | Plain Text 
  1. <script type="text/javascript">
  2. function toggle(id, id2){  
  3.     var toggle_one = document.getElementById(id);  
  4.     var toggle_two = document.getElementById(id2);  
  5.     if(toggle_one.style.display == "block"){  
  6.         toggle_one.style.display = "none";  
  7.         toggle_two.innerHTML = "Show";  
  8.     }else{  
  9.         toggle_one.style.display = "block";  
  10.         toggle_two.innerHTML = "Hide";  
  11.     }  
  12. }
  13. </script>
  14.  
  15. <a href="#" id="tlink" onclick="toggle('comments', 'tlink');">Show</a> Comments<br><br>  
  16. <div id="comments" style="display:none;padding 10px;">Now you can see the comments</div>

Report this snippet  

You need to login to post a comment.