jquery ui tabs add tab strange behaviour

Question

i m adding new jquery ui tabs to a tab

the sample page(click on Create a new Tab)

the code

  $('#tabs-2').tabs(
 {
load: function(e, ui) 
{
    $('.show_comment').die('click');
    if ($('#tabs-2').tabs('option','selected') == 0)
    {
           $('.new_text').click(function(){
              $("#tabs-2").tabs("add", 'ushout.jsp' , 'album_name' );       
              return false;
           });

            return false;
        });
    }
}
 ,
selected: 1,
fx:{height: 'toggle', duration: 'fast'},
 spinner: '<em>Loading...</em>' ,
collapsible: true
});

but on selecting the tab(album_name) first time no page is displayed...

but on selecting the tab second time the page is displayed

please help

thanks

Answer 1

adding tabs will have this behaviour with any effects on the tabs

the line

fx:{height: 'toggle', duration: 'fast'}

is causing the problem

use with no effects

$('#tabs-2').tabs(
{
load: function(e, ui) 
{
$('.show_comment').die('click');
if ($('#tabs-2').tabs('option','selected') == 0)
{
       $('.new_text').click(function(){
          $("#tabs-2").tabs("add", 'ushout.jsp' , 'album_name' );       
          return false;
       });

        return false;
    });
  }
}
,
selected: 1,
/* fx:{height: 'toggle', duration: 'fast'}, */ 
spinner: '<em>Loading...</em>' ,
collapsible: true
});

thanks