title: Javascript hiding and showing dynamic content of a div
body: <p>Currently I hide and show the content of a div like this:</p>
  
  <pre><code>var header = null;
          var content = null;
          var mainHolder = null;
          var expandCollapseBtn = null;
          var heightValue = 0;
  
          header = document.getElementById("header");
          content = document.getElementById("content");
          mainHolder = document.getElementById("mainHolder");
          expandCollapseBtn = header.getElementsByTagName('img')[0];
  
          heightValue = mainHolder.offsetHeight;
  
          header.addEventListener('click', handleClick, false);
          mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);
  
          function handleClick() {
              if(expandCollapseBtn.src.search('collapse') !=-1)
              {
                  mainHolder.style.height = "26px";
                  content.style.display = "none";
              }
              else
              {
                  mainHolder.style.height = heightValue + "px";
              }
          }
  
      function transitionEndHandler() {
          if(expandCollapseBtn.src.search('collapse') !=-1)
          {
              expandCollapseBtn.src = "expand1.png";
          }
          else{
              expandCollapseBtn.src = "collapse1.png";
              content.style.display = "block";
          }
      }
  </code></pre>
  
  <p>This is fine if the content is static, but I'm trying to populate my div dynamically like so.</p>
  
  <p>This is called from an iphone application and populates the div with a string.</p>
  
  <pre><code>var method;
  
              function myFunc(str)
              {
                  method = str;
                  alert(method);
                  document.getElementById('method').innerHTML = method;
              }
  </code></pre>
  
  <p>I store the string globally in the variable method. The problem I am having is now when I try expand the div I have just collapsed there is nothing there. Is there some way that I could use the information stored in var to repopulate the div before expanding it again? I've tried inserting it like I do in the function but it doesn't work.</p>
  
  <p>Does anyone have any ideas?</p>
  
  <p>to replicate:</p>
  
  <p>Here is the jsfiddle. jsfiddle.net/6a9B3 If you type in text between
   here <p></p> it will work fine. I'm not sure
   how I can call myfunc with a string only once in this jsfiddle, but if
   you can work out how to do that you will see it loads ok the first
   time, but when you collapse the section and attempt to re open it, it
   wont work.</p>
  
  <p>If the only way to fix this is using jquery I dont mind going down that route.</p>