Javascript - Hide & Show

People who liked this item

6 Comments

1.  

   pauen ~ 22 months ago

   0 votes
   
   Woyano team, It was difficult to edit this post. The html code was executed in the edit window.
   [ reply ]
2.  

   bobsawyerdotcom ~ 22 months ago

   1 vote
   
   Much simpler version:
   
   
   // pass the DIV id from onclick()
   
   function fold(theid) {
   var theid=document.getElementById(theid);
   theid.style.display=(theid.style.display=="block")? "none" : "block";
   }
   [ reply ]
   1.  

      pauen ~ 22 months ago

      0 votes
      
      Thanks, I still would need to change "Hide" to "Show" and back again. I couldn't find a way to change both inside the ( ? : )
      [ reply ]
3.  

   will ~ 22 months ago

   1 vote
   
   Adding onto bobsawyerdotcom -- I find this very useful
   
   NOTE: needs bobsawyerdotcom's "fold()" function to work
   
   
   /**
   * Show hide many elements by ids
   * ie: show_hide( 'tag1_id, tag2_id, tag3_id' );
   */
   function show_hide(ids)
   {
   var list_of_ids = new Array;
   
   // check for , in id
   if( ids.indexOf(',') )
   {
   list_of_ids = ids.split(',');
   }
   
   // do show/hide based on css display = none
   // it will assume that the element is showing if no css "display" is found
   if( list_of_ids.length > 0 )
   {
   for(i=0; i < list_of_ids.length; i++)
   {
   // show hide ele
   fold(list_of_ids[i]);
   }
   }
   else // one id
   {
   // show hide ele
   fold(ids);
   }
   }
   [ reply ]
4.  

   will ~ 22 months ago

   1 vote
   
   ALSO change this line in from bobsawyerdotcom's function
   
   theid.style.display=(theid.style.display=="block")? "none" : "block";
   
   to:
   
   theid.style.display=(theid.style.display=="none") ? "block" : "none";
   
   This is that when you have no display set, the element will hide first time and not be set to "block" (so you don't have to click on it twice).
   
   So heres the full function:
   
   function fold(theid) {
   var theid=document.getElementById(theid);
   theid.style.display=(theid.style.display=="none") ? "block" : "none";
   }
   [ reply ]
5.  

   teqqles ~ 13 months ago

   0 votes
   
   You also might want to consider reverting to the default style for the object you are modifying, obviously block is fine for a div, but if you are working with differing types of container then its worthwhile.
   [ reply ]
6.  

   AdGuy

   22 votes
   
   This is my two cents...
   
      
   Hey you know AdGuy always gets the last word! ;)