JQuery select function for slide and possible create

I have built a menu system that slides rather like iOS panels.

Content is loaded into the next panel via ajax on the user click and then slides over to it. Would it be possible though to rather than have a series of panels already created ie. #panel1 #panel2 #panel3 etc... To seemingly create this effect without that need.

So if a user clicks on a link the ajax is triggered a hash or rel attribute governs what script is triggered and then an entire panel is created after this one and slid to.

Here is some code.

<di开发者_JS百科v id="side">
<div class="panelcontainer">

<div id="sidepanel1" class="sidewrapper">


<div class="panelhead"></div>Blah <a href="#" onClick="slide(this); return false;">Blah</a>

</div>

</div>


<div class="panelcontainer" style="display:none;">

<div id="sidepanel2" class="sidewrapper">


<div class="panelhead"></div>Blah blah

</div>

</div>
</div>

The idea therefore being that sidepanel2 does not actually exist but is created on the ajax load immediately after sidepanel1.

This may be a stupidly complicated way of doing it. IF anyone has a better idea I am all ears. The fundamental function being a navigation system like iOS using ajax to load content into panels,

Any ideas?

Marvellous

Respecting your markup, you could do it like this:

function slide(link){
   //Make the ajax call to get the content, could be anyway you want
   $.ajax({
      ...
      success: function(body){
          createPanelBody(body);
      }
   });
   //This function creates the panelBody div (if it doesn't exist) and fills it with content
   function createPanelBody(body){
       $panelBody = $(link).siblings(".panelBody");
       if($panelBody.size() == 0){ //If panelBody doesn't exist..              
          $panelBody = $('<div class="panelBody" />');  //We create it dynamically
          $panelBody.appendTo($(link).parent());  //And make it a sibling of panelHead
       }
       $panelBody.html(body); //Fill the div with the requested content
       //$panelBody.slideDown(); //Uncomment this line if you want to slide the panel
   }  

}

As you can see, we create dynamically a div with class "panelBody" (if it doesn't exist yet) and fill it with the ajax content, everything depending on which link you clicked.

I hope to have understood well what you need. Cheers