jquery - Expand/Collapse Content on a Webpage [ also load content on click ] -

i'm making site has different panoramas on 1 page

made pano2vr gardengnomesoftware.com/pano2vr.php

the problem want hide each panorama in expandable section. user can scroll down , open 1 want.

i've been trying different expand/collapse codes, such one

http://www.adipalaz.com/experiments/jquery/expand.html

and this

http://webcloud.se/code/jquery-collapse/

(the reason i've chose these have smooth opening animations, graphic changes show if open or closed , can have more 1 open @ time [non-accordion style])

however first issue panoramas don't load if in collapsed section. (if use 2nd script has cookies , remembers if section open, if open section panorama in , refresh page load in)

also don't want them (the panoramas/content inside expandable sections)to load in when open page, each 1 can 5mb+, need way of loading content in section when expand it. (unfortunately panoramas both flash , html5 autoload)

this code use load panorama on page:

<script type="text/javascript">         // hide url field on iphone/ipod touch         function hideurlbar() {              if (window.pageyoffset==0) {                 window.scrollto(0, 1);                 // repeat every second slow rendering pages                 settimeout(function() { hideurlbar(); }, 3000);              }         }     </script> 

and

        <script type="text/javascript" src="pano2vr_player.js">     </script>     <script type="text/javascript" src="skin.js">     </script>     <div id="container" style="width:960px;height:540px;">     content requires html5/css3, webgl, or adobe flash player version 9 or higher.     </div>     <script type="text/javascript">          // create panorama player container         pano=new pano2vrplayer("container");         // add skin object         skin=new pano2vrskin(pano);         // load configuration         pano.readconfigurl("some_panorama_name.xml");         // hide url bar on iphone         hideurlbar();      </script> 

i've seen stuff ajax i'm unsure how tie jquery make work.

i did think have image in hidden sections say, click here load panorama, use code swap out image panorama, don't know how i'd that? ajax? iframe?

thanks reading far! wanted make sure covered before posting.

those plugins offer events can hook into. if can add event handler "onexpand" (i'm assuming) event , dynamically add panorama image using jquery's append() , appendto() functions. when collapse panel expanded add image tag:

$("<img src='mypanorama.jpg' id='panorama1' />").appendto("#collapsepanel1"); 

and when collapsed remove image tag (by id):

$("#panorama1").remove();