Jquery tabs

I am trying to implement jquery tabs and load the iframe in it.

so I came up with following code. That code will append the the iframe to the panel and resize the iframe. There are a few problems here.

First, when the page is loaded the content does not get loaded until I click on the tab. Once It clicked and loaded if I need to come back it does not reload it show previous result.

I need the tab act like a ajax tabs
The other issue is the iframe  does not re-size properly

<div id="tabs">
		<ul style="padding: 0; margin: 0;">
		
			
				<li><a href="##tab-1">test1</a></li>
<li><a href="##tab-2">test2</a></li>
<li><a href="##tab-3">test3</a></li>
			
		</ul>

<div id="tab-1" title="index1.cfm"></div>
<div id="tab-2" title="index2.cfm"></div>
<div id="tab-3" title="index3.cfm"></div>
		 
		
		<cfoutput query="rc.getMenuTab" >
			<div id="tab-#rc.getMenuTab.currentrow#" title="index.cfm?event=#rc.getMenuTab.link#"></div>
		</cfoutput>	
		
		
	</div>

Select all Open in new window

 $('#tabs').tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "There was an error loading this content. ");
                }
            },
            select: function(event, ui) {
                var pnl = $(ui.panel);
                var url = pnl.attr('title');    // get url to load from title attr

                //if ((url) && (pnl.find('iframe').length == 0)) {
                    $('<iframe />')
                        .attr({
                            frameborder: '0',
                            scrolling: 'no',
                            src: url,
                            width: '100%',
                            height: '100%'
                        })
                        .appendTo(pnl)
                        .load(function() {      // IFRAME resize code

                            var iframe = $(this);   // iframe element
                            var win = this.contentWindow;   // child window
                            var element = $(win.document);  // element to size to; .document may return 0 depending on sizing of document, may have to use another element

                            $(win.document).ready(function() {
                                iframe.height(element.height());    // resize iframe
                            });
                       });
              //  }

                return true;
            }
        });

Select all Open in new window