title: Expand/Collapse Content on a Webpage [ also load content on click ]
body: <p>I'm making a site that has different panoramas on one page</p>
  
  <p>made with pano2vr gardengnomesoftware.com/pano2vr.php</p>
  
  <p>The problem is that I want to hide each panorama in an expandable section. so the user can scroll down and then open up the one they want.</p>
  
  <p>I've been trying different expand/collapse codes, such as this one</p>
  
  <p><a href="http://www.adipalaz.com/experiments/jquery/expand.html" rel="nofollow">http://www.adipalaz.com/experiments/jquery/expand.html</a></p>
  
  <p>and this</p>
  
  <p><a href="http://webcloud.se/code/jQuery-Collapse/" rel="nofollow">http://webcloud.se/code/jQuery-Collapse/</a></p>
  
  <p>(the reason i've chose these is that they have smooth opening animations, a graphic that changes to show if its open or closed and you can have more than one open at a time [non-accordion style])</p>
  
  <p>However the first issue is the panoramas don't load if they are in a collapsed section.
  (if I use the 2nd script it has cookies and remembers if a section was open, if I open the section with the panorama in and refresh the page then it will load in)</p>
  
  <p>also I don't want them (the panoramas/content inside the expandable sections)to load in when you open the page, as each one can be 5mb+, so I need some way of loading the content in the section when you expand it. (unfortunately the panoramas both flash and html5 autoload)</p>
  
  <p>This is the code I use to load a panorama on a page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          // hide URL field on the iPhone/iPod touch
          function hideUrlBar() {
  
              if (window.pageYOffset==0) {
                  window.scrollTo(0, 1);
                  // repeat every second for slow rendering pages
                  setTimeout(function() { hideUrlBar(); }, 3000);
  
              }
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>        &lt;script type="text/javascript" src="pano2vr_player.js"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript" src="skin.js"&gt;
      &lt;/script&gt;
      &lt;div id="container" style="width:960px;height:540px;"&gt;
      This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
          // create the panorama player with the container
          pano=new pano2vrPlayer("container");
          // add the skin object
          skin=new pano2vrSkin(pano);
          // load the configuration
          pano.readConfigUrl("some_panorama_name.xml");
          // hide the URL bar on the iPhone
          hideUrlBar();
  
      &lt;/script&gt;
  </code></pre>
  
  <p>I've seen some stuff with ajax but I'm unsure how to tie it all into jQuery to make this work.</p>
  
  <p>I did also think that I could just have an image in the hidden sections which would say, click here to load panorama, then use some code to swap out the image for the panorama, but I don't know how I'd do that? ajax? iframe?</p>
  
  <p>Thanks for reading this far! I wanted to make sure I covered everything before posting.</p>