Simple Javascript Show/Hide for Form Elements


/ Published in: JavaScript
Save to your folder(s)

This simple script toggles element visiblity on a page based on a form field's current value.


Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2. <!--
  3. function showhide(what,obj) {
  4. // alert(what);
  5. if(what != "1") {
  6.  
  7. obj1 = document.getElementById(obj);
  8. obj1.style.display = '';
  9. } else {
  10.      obj1 = document.getElementById(obj);
  11.    obj1.style.display = 'none';
  12. }
  13. }
  14. function hide(obj) {
  15. // alert(obj);
  16. obj1 = document.getElementById(obj);
  17. obj1.style.display = 'none';
  18. }
  19. //-->
  20. </script>
  21.  
  22. <!-- HTML form element that triggers toggle -->
  23.  
  24. <input class="inputbox" type="radio" name="option" value="1" onchange="showhide(this.value,'toggle')" />Option 1<br/>
  25.  
  26. <!-- HTML element that toggles -->
  27.  
  28. <div id="toggle">This content will only be shown if option one is chosen</div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.