It would be great if we could specify a different markup instead of the default div for the tabbed content.
For exemple with this markup :

    <form id="tabs">
        <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab1">Tab 2</a></li>
        </ul>
        <fieldset id="tab1">
            ...
        </fieldset>
        <fieldset id="tab2">
            ...
        </fieldset>
    </form>

I would like the fieldsets as tabbed content.

Using Chrome or Safari on the PC I get mixed results when a page has tabs of different heights.

For example: http://www.ac-et.com/lighting/products/chroma_q/led/batten_891/CHCFCRGBA.asp

Click on the first 2 tabs, go back and forth and they are fine, click on Specifications and it should be fine, but if you go back to either first 2 tabs and then back to the 3rd the tab content will jump. If you now scroll the page down and click another tab that also jumps to the top of the page. It doesn't always happen straight away, but sometimes it does.

I have also found that if you scroll down the page before you click a tab this can cause issues too. It mainly depends on where you have scrolled and if the entire tab is visible. If its not, the page jumps up.

The behaviour is very different in IE and Firefox.

I love Easy Tabs and it works fine in al lbrowsers except IE7. I have found that when the animation is on (default fadein/out) the tab changes, the old one fades out, the new ones fades in...and then fades out again leaving a blank tab!

This doesn't happen when the animation is off and also I can't see it happening on the demo page. I use the next and prev button script too.

What do you think is gogin on? Why would the tab change and then disappear?

// FIXED implemented incorrectly

Hey thanks, for a great work on the multi-tab history, last change worked a treat.

However it's knocked off my +Addthis widget (It did work) but would you be able to have a look at this, instead of been : 4724#home when you receive and email from +addthis is out putting as : /4724#.TiP9KVx40Ws.email.

Any ideas?

Cheers

I wanna know how to remove SPACE auto generated between tabs.

thanks

my code main html

<script>

$(document).ready(function(){

$('#tabs1').easytabs({
uiTabs:true,
animate:true,
animationSpeed:"normal",
cache:false
});

$('#tabs1')
.bind('easytabs:ajax:beforeSend', function(e, clicked, panel){
var $this = $(clicked);
$this.data('label', $this.html());
$this.html('Loading...');
})

.bind('easytabs:ajax:complete', function(e, clicked, panel, response, status, xhr) {
  var $this = $(clicked);
  $this.html($this.data('label'));
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

});

</script>

    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, , luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. hendrerit.</p>
</div>


  </div>

Has any testing been done with easytabs and Rails 3.1 at this stage?

While I would not have expected anything to break (especially since JQuery is now the default - it should be easier!), I am getting some errors when migrating a working implementation of my setup to 3.1. The error I am getting is as follows:

Uncaught TypeError: Object [object Object] has no method 'easytabs'
(anonymous function)
f.extend._Deferred.e.resolveWith
f.e.extend.ready
f.c.addEventListener.z

I have moved all the scripts into the assets/javascripts folder, and they are all included in the manifest file (they appear to be loaded as expected, with the exception of the error above).

I should perhaps note that I have my easytabs config script (below) in my application.html.erb layout, to ensure that it is called only once when using ajax tabs.

<script type="text/javascript">
    $(document).ready(function(){ $('#tab-container').easytabs({    cache: false,
                                                                    tabs: 'ul#outer-tabs > li'

    })

    .bind('easytabs:ajax:beforeSend', function(e, clicked, panel){
        var $this = $(clicked);
    $this.data('label', $this.html());
    $this.html('Loading...');
})

.bind('easytabs:ajax:complete', function(e, clicked, panel, response, status, xhr) {
    var $this = $(clicked);
    $this.html($this.data('label'));
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#error").html(msg + xhr.status + " " + xhr.statusText);
    }
})

.live('easytabs:ajax:complete', function() {

    $('#subtab-container').easytabs({   cache: false,
                                        tabs: 'ul#inner-tabs > li',
                                        updateHash: false
                                    })
});

});
</script>

I appreciate that 3.1 is still in RC, but hopefully this might give a heads up for any potential issues (it may be a configuration that I have created while migrating to a 3.1 app, and if so, it will hopefully allow docs to be updated for when 3.1 gets a full release).

Here my issue,

I have a tab #easytabs and on random click, I change the tab #easytab by a new tab #easytabs content (LI summary and DIV content).
But I can't load a new instance of easytab.

Need a little help :)

I am trying to use backbone.js along with easyTabs and there seems to be a conflict on the click event. I get no errors, it just seems like backbone is highjacking the click event from easyTabs.

As per the title, utilising the collapsible function causes the page to jump to the top of the tab content area. This happens quite randomly (and increasingly frequently -at least it is perceived that way- the more tabs you click on to open/close). I have tested this in the following browsers : IE8/9, FF7/12, Chrome 17/18, Safari, Opera. And it occurs in all of them.

I have also concluded that it IS the collapsible function causing this as it does not occur when that function is removed from the script (tried different animations, timings etc. had no effect at fixing problem) It also occurs on your demo page here: http://os.alfajango.com/easytabs/#transition-tab1 on the Collapsible and cancelable demo as well as the Transition Options demo (which both use the collapsible) so it is definitely not just my code.

As an example, to replicate the error, just click on the tabs on your Transition Options demo randomly, open one tab, shift tabs, then close the tab you are on, shift tabs, open tab, close tab, open, close, shift tabs... within 3-5 clicks you'll see it happen. Seems to usually happen when you click a tab to open it, click same tab to close it, then switch tabs and it jumps.

If you're curious, you can see it happen on my code here: http://dl.dropbox.com/u/17861112/cue/examples/plc-ot-5/index.html Please note that Home, RLQ, e-resources and Directory are not part of the tabbed navigation/collapsible functionality. Try clicking through Resources -> Forms

Looks like quite a few others are experiencing this same issue so it would be great if it was resolved somehow.

You've created an absolutely fantastic tabbed navigation script here that is super customisable where you've thought about almost all possible implementations - kudos to you! Now if this collapsible thing would work.... :)

Appreciate your time and efforts.

Cheers,
Steve S

Whenever the url has a hash without a value (just a # sign), a javascript error gets thrown in IE, preventing the remaining javascript from running. The source of the problem is the function plugin.matchInPanel. If you could add a length check on the hash variable, you could avoid the error. I.e. changing line 282 of your latest code from this

return ( hash ? plugin.panels.filter(':has(' + hash + ')').first() : [] );

to this

return ( hash.length > 1 ? plugin.panels.filter(':has(' + hash + ')').first() : [] );

would fix the issue.

Hey,

I was wondering if there is a way to have multiple tabs on a page, whether they are nestled or standalone on the page, but with history enabled, similar to jQuery BBQ but to have customised hashtags?

Thanks,
James

Using an a tag with a hash tag for the tabs creates an incompatibility between browsers. The incompatibility is caused by the original hashtag standard in HTML 1. Because most browsers expect these links to only be seen on long simple layout top-to-bottom designs the browser will attempt to scroll to the link after the javascript has executed.

In modern browsers where many types of div, span, tbody, and other blocks exist this causes browsers to re-render the entire page and guess where that anchor actually is. In the case of EasyTabs this can create a situation where HTML blocks are moved, hidden, and changed when the link is clicked.

Request: Enable an alternate syntax using an invalid URL that cannot be interpreted. Such as '@tab Name', '.TabName', etc.

Can reproduce results of broken EasyTabs (from browsers realigning and moving divs) on many joomla sites. In truth it matters mostly how the CSS/templates lay out but the more complicated the site the more likely the browser will scroll the page to the button.

Hi,

Thanks for the plugin. However, I'm having trouble with it not loading every time the page is accessed. On some occassions, the page loads with no problem, showing the tabs as they should.

However, on other occassions, the content of the tabs appears expaned (the same as when you have javascript disabled). The console in firebug says that 'easytabs is not a function' when this occurs.

Any help would be much appreciated.

I'm calling the files in the head tag as follows:

script src="/jquery_files/js/jquery-1.6.2.js" type="text/javascript"></script

script src="/jquery_files/js/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script

script src="/jquery_files/js/jquery.easytabs.js" type="text/javascript"></script

script src="/jquery_files/js/commonjquery.js" type="text/javascript"></script

The following code is in the common.js file:

$(document).ready(function(){

$('#tab-container-3').easytabs({
    animationSpeed: 500,
    tabActiveClass: "selected-tab",
    panelActiveClass: "displayed",
    cycle: 5000
});

});

Thanks very much,

Vicki

<div id="tab-container" class="tab-container">
 <ul class="etabs">
     <li class="tab" id="tb1"><a href="tab1.html #content1" data-target="#tab1">Tab1</a></li>
     <li class="tab" id="tb2"><a href="tab2.html #content2" data-target="#tab2" title="Tab2" target="_self">Tab2</a></li>
     <li class="tab" id="tb3"><a href="#tab3">Tab3</a></li>
 </ul>
 <div class="panel-container">
  <div id="tab1"></div>
  <div id="tab2"></div>
     <div id="tab3">Here is my content for tab3 </div>
 
 </div>
</div>

Sometimes, after moving between the tabs, a nested tab will show content from multiple tabs. See screenshot from the official demo of a nested tab:

http://oi41.tinypic.com/2qjaixe.jpg

What happened in the example above was that I opened the nested tab "Subtab C", went back to Tab 2 and the Tab 3 again. Subtab A is then displayed by default, but as you can see it is also showing the Subtab C content.

This bug only happens sometimes. I had to click on the various tabs many times to recreate the problem above, but it happens every now and then on my page as well...

Firstly great work on this, the history and back button works for sub-tabs great.

Just a small issue I've found, if no #tab-1 on page load then it breaks? only works if you start with /default.asp#tab-1 rather than displaying the first tab by default if no tab has been selected.

Hope this makes sense?

James

I've added the easytabs plug-in to this Magento page:

http://79.170.44.156/woodhouse.co.uk/why-woodhouse

prototype and scriptaculous are also loaded, however, I have loaded jQuery and added noconflict before the easytabs script starts. I've called easytabs from an additional script 'why-easytabs.js'.

What do I need to do to eliminate the JS errors and run easytabs?

Matt

It would be more flexible and much more versatile if you could set a default value (true/false) to allow tabs and content to be in different / separate div's / id's.

By setting a default value to true, you could allow tabs to search through the entire document to load content anywhere it found the same id. This would allow it to search through DOM entirely, including parents, and siblings — currently only children seem to be supported.

Being able to specify which div / id to look at for the specific id's would be another step, although probably not that necessary at this point.

If updateHash: true, IE7 annoyingly moves the screen to the content div anchor (as you woudl expect with normal anchor links) for tabs with a larger amount of content. This doesn't happen in IE8, firefox or any other modern browser - the page remains still and the tabs change/expand as they should. This 'jumping' about on the page in IE7 is irritating.

Any suggestions to stop the page moving to the anchor tag in this way in IE7?

Good tool, and of great simplicity. But: Trying to get 2-level nested tabs tabs ajax-ed. Ajax working fine on the first level, but at the second level the URLs given are opened in a new browser window. This is the code - a bit messy right now:

.... function....
  $('#ajax-tab-container').easytabs();
  $('#titel-panel').easytabs();
});

<div id="ajax-tab-container" class='tab-container'>
    <ul class='easytabs'>
      <li class='easytab'><a href="./easyhome.asp"  data-target="#home-panel">Home</a></li>
      <li class='easytab'><a href="#titel-panel">Titel</a></li>
        <li class='easytab'><a href="#termin-panel">Termin</a></li>

    </ul>


    <div id="home-panel"></div>
    <div id="titel-panel">
                    <ul class='easytabs'>
                        <li class='easytab'><a href="./easytitel.asp"  data-target="#neu">Neu</a></li>
                    <li class='easytab'><a href="./easydemnaechst.asp" data-target="#demnaechst">Demnächst</a></li>
                  </ul>
                      <div id="neu"></div>
                        <div id="demnaechst"></div>
     </div>
    <div id="termin-panel">Termine-STATIC from within main page</div>
    </div>

Thanks for help ...
Alex

I would like to be able to have a disabled tab, like

See source of http://jsbin.com/uxigow

Right now I can style the Disabled Tab as being greyed out, have the cursor appear as a pointer, but a click on it still loads the disabled content. (and brings the tab forward, not pretty) How can I fix that?

My tabs seems to be slow loading - I have two tabs and it shows the UL first and then a few seconds later, the CSS is apply.

This is a similar issue for the jQuery UI tab:
http://stackoverflow.com/questions/1507378/jquery-ui-tabs-loading-first-as-ul-then-as-tabs

How do I modify Easytabs such that the CSS are loaded first - that way my visitors don't see a long vertical list?

Thank you once again for creating this great plugin, have used it quite extensively. And also for adding the ajax functionality recently.

Ok this should be something that I have overlooked somewhere, but I have been trying to implement forward/next backwards/previous buttons that update dynamically

I know in ui-tabs I can go

$(function() {var $tabs = $('#tabs').tabs();

$(".ui-tabs-panel").each(function(i){

  var totalSize = $(".ui-tabs-panel").size() - 1;

  if (i != totalSize) {
      next = i + 2;
      $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
  }

  if (i != 0) {
      prev = i;
      $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
  }

});

$('.next-tab, .prev-tab').click(function() {
       $tabs.tabs('select', $(this).attr("rel"));
       return false;
   });});

How would I go about doing this with easytabs
thank you in advance and keep up the great work

Hi, thanks for this awesome plugin.

I would like to solve an issue that is bugging me for quite some time now.

I just want to load some iframes at the panels with 100% height. I mean to show the whole content of the iframe.
The content is always dynamic and the height is different in every occasion.
Is it possible and how?

Let me tell you what i have dome and what problem i face.

I have included the following codes

1. Css just for the width.

   iframe { display:block; width:100%; border:none; }

2. This is a function to resize the iframe

function sizeFrame(frameId) {

var F = document.getElementById(frameId);
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
}
alert(frameId + " -> " + F.height );/**/
}

1. The panel

     <ul class='etabs'>
       <li class='tab'><a href="#panel-1"><span>TAB 1</span></a></li>
       <li class='tab'><a href="#panel-2"><span>TAB 2</span></a></li>
     </ul>

<div class='panel-container'>

    <div id="panel-1">
             <iframe id="the_frame1" src="testframe1.php" onLoad='sizeFrame("the_frame1"); ></iframe>
    </div>

    <div id="panel-2">
             <iframe id="the_frame2" src="testframe2.php" onLoad='sizeFrame("the_frame2"); ></iframe>
    </div>

    </div>

Hi the Script is supered and very easy to customize, but i am facing one small issue.

When i click on the tab link, browser moves to top, how to solve this, please help.

Regards
Harish

I've noticed that when switching between Ajax tabs, the loaded content flickers and/or jumps, because the plugin seems to switch to the requested content regardless of whether the content has finished loading. (Hence, the effect becomes more obvious as the size of the fetched content increases.) Here's an example site which shows what I mean.

I also notice it happening on the main demo too: it only occurs for a split second because the demo example only fetches a little bit of content in each tab, but when I switch to "Required JS" for the first time (i.e. before the content has had the chance to cache) there's a brief flash of wonky formatting and then it jumps to the "correct" formatting.

It would be useful if the fetched content only transitioned in after the content has finished loading, in order to ensure that there will always be a smooth transition. (Much like this example using another script, which I've set to show a loading graphic right until when the requested content has completely loaded.) Or is this already possible somehow using the event hooks or options?

Is there a way to add new tab dynamically?

Thank you

I’m using easytabs to divide a form into multiple tabs. Switching works great, but since I need to make validation before switching to other tab, I’ve run into problem. I’m calling form validation inside the "easytabs:before" event. Everything works until I want to prevent switching from current tab if validation has failed.

I would like to see some mechanism in the EasyTabs to cancel the tab switching in the "easytabs:before" event.

Thanks!

[Moved to new issue]

Is it possible to nest sets of easytabs? E.g. I want to have my main tabs, and some subtabs in each of the main tabs, which can also load content via ajax.

I tried a simple nesting by simply putting a second set of tabs within the layout of the page being loaded by the main tab (with different container div ids), but I got some unexpected behaviour, such as the main set of tabs trying to load content that should have been loaded by the subtabs, which makes me think it maybe wasn't designed to be used in this way.

Great plugin which I have one small issue.

The rendering of the ui-tabs-panel that wraps the initially active tab-panel is not getting the following inline styles when first rendered.

  display: block;
  position: static;
  visibility : inherit;
  zoom: 1;
  filter: none;

However, once you click on a tab (including the active one) to select it the styles are added and the ui-tabs-panel displays correctly.

These styles appear to force some things in IE7 and IE8, thus rendering the panel properly, the problem doesn't occur in Chrome, FF or IE9.

Since these are added when the tab is clicked I guess it should be easy to add them on the initial rendering.

When using IE7 and file:// urls all urls hrefs are returned with the path to the current file when queried with javascript. This means that querying for links with href="#pane-1" will get no hits. Instead the url will be href="file://path/to/file#pane-1". Fortunately there's an easy fix, just use a[href$=..] to query for links instead. I'm using a modified script that does just that.

this is running well, ..... but when the user click on one of the according headers to toggle the accordion display,
the corresponding easyTab_container display briefly all its content before collapsing and starting the animation
( in fact, it displays all the headings up to the current index of the animation which seems bit to be reset to default

  #accordion
   .accordion-header.active
    %h3 header1
   %ul.accordion-list
       %p paragraph1

       #tab_container_12
        .panel-container
            #heading11.tab_container_12
                %p xxxxxxxxxxx

            #heading12.tab_container_12
                %p xxxxxxxxxxx

            …..
        %ul
            %li#default= link_to image_tag("xxx"), "#heading11"
            %li= link_to image_tag("xxx"), "#heading12"
            ……

 .accordion-header.clear
    %h3 header2
     %ul.accordion-list
      %p  paragraph1

       #tab_container_22
        .panel-container
            #heading21.tab_container_22
                %p xxxxxxxxxxx

            #heading22.tab_container_22
                %p xxxxxxxxxxx

            …..
        %ul
            %li#default= link_to image_tag("xxx"), "#heading21"
            %li= link_to image_tag("xxx"), "#heading22"
            ……

and I am using the animation
"$('#tab_container_12').easytabs({ animationSpeed: 1500, defaultTab: 'li#default', cycle: 3500 });
$('#tab_container_22').easytabs({ animationSpeed: 1500, defaultTab: 'li#default', cycle: 3500 });"

See title. Is this possible?

I tried putting data-target="#currenttab" didn't seem to work.

Doesn't appear to function with jquery ui themeroller themes. Generated code doesn't apply the appropriate classes.

Hi

Im testing your JQuery Easytabs. I have a little problem with it... I think for what I read that is not a problem of this control, elsewhere of the other ones... but maybe someone do it work !!

When I have a TAB with a textarea box with component like tinymce or ckeditor... and if my page load on another tab - so when i go to the tab of the riched html area, i cannot see the text inside it... and the editor is disabled.
I readed is a problem of creating the editor on a hidden div.

can anyone make it works ?

thanks

Hi,

First of all, congratulations for this great plugin !

I would use EasyTabs on a Drupal website. Drupal use an old version of jQuery (1.3.2) and to use a newer one i have to deal with noConflict.
Witch version of jQuery is needed to work with EasyTabs ? And how could i use noConflict to use EasyTabs if my jQuery version is too old ?

Thanks for the help,

Best regards,

if any tab contains <script> elements, those elements are executed twice: firstly upon page load, and a second time when activating a previously invisible tab. this is due to getHeightForHidden() (used in selectTab) which actually duplicates the tab content and has browsers execute the javascript again...

this could at least partly be avoided when not using animations by only calculating the heightDifference when there's animation enabled.

avoiding the second javascript firing also fixes the ckeditor/tinymce init issues.

I've got AJAX'd tabs up and running in my project, but I'm having a weird issue where the tab loads twice when the link is clicked. Using the chrome developer tools, it looks like the second call is due to a hash change.

Here is the original call stack:

jQuery.ajaxTransport.send                                        jquery.js:8103
jQuery.extend.ajax                                               jquery.js:7581
jQuery.fn.extend.load                                            jquery.js:7024
$.easytabs.activateTab                                   jquery.easytabs.js:546
$.easytabs.plugin.selectTab                              jquery.easytabs.js:213
$.easytabs.bindToTabClicks                               jquery.easytabs.js:470
jQuery.event.dispatch                                            jquery.js:3257
jQuery.event.add.elemData.handle.eventHandle                     jquery.js:2876

The second call stack is this:

jQuery.ajaxTransport.send                                        jquery.js:8103
jQuery.extend.ajax                                               jquery.js:7581
jQuery.fn.extend.load                                            jquery.js:7024
$.easytabs.activateTab                                   jquery.easytabs.js:546
$.easytabs.plugin.selectTab                              jquery.easytabs.js:217
$.easytabs.plugin.selectTabFromHashChange                jquery.easytabs.js:297
$.easytabs.initHashChange                                jquery.easytabs.js:637
jQuery.event.dispatch                                            jquery.js:3257
jQuery.event.add.elemData.handle.eventHandle                     jquery.js:2876

My js to initialize the easytabs is just

$('#maintabs').easytabs({
  panelContext: $('div#content'),
  cache: false
});

To load the html content, my backend is RoR, and each tab has a link to a controller action that renders an html file without a layout. I can post more details if necessary.

I have the haschange library also, and the back-forward behavior works fine. It reloads the tab once, as expected.

Any idea why this would happen?

Im getting an error with the github clone of this:
http://content.screencast.com/users/metaperl/folders/Jing/media/7d5e809b-2a08-4530-80b3-d867cc70e8e2/2011-10-02_1614.png

See nested tabs under "Find Music" and "On Sale & Recommended" :

http://www.enivrez.com/nested/nested.html

I have "collapsible" set to true on both sets of nested tabs. When I first load the page, it's collapsed by default, as I want it. However, when I switch between those top-level tabs, they open back up. Any idea how to set them to remain collapsed when I click away and back on them? Hoping and crossing all sorts of appendages this is a quick fix...

I am using the "Multiple on Same Page" script in order to build a static website, and have run into html anchoring issue with Internet Explorer. If you'd be kind enough to visit this page on IE:

underthebanyan.mimazee.com

and navigate through different main tabs, you'd realize vertical position of the page keeps fluctuating. The third option (Learn the Facts) and the 6th option (Get Involved) tend to stay down with the pages header visible, but the rest of the pages tend scrolls up as it opens up the anchored page.

The first time I worked with the script, I noticed that inline-block for the menu's li tags wasn't working. I floated li's to left, and set display to block for a tags. That's probably only functional change that I made as far as the main menu is concerned.

I can understand that IE pushes the html anchor to the top of the page, but why would it be so inconsistent?
If someone could share his/her insight on this, it'd be greatly appreciated. Thank you for your time.

Hi,

A quick clarification - in the standard UI tabs, setting an href value on the tab link will allow the tab content to be loaded via ajax. The homepage for this project indicates that it has all the functionality of the ui tabs, but also specifies that it does not do ajax loading.

Thus, my question is, if I drop this in place of my normal UI tabs, which load with ajax, will it break the ajax loading? If so, is there any workaround for this?

Thanks for any assistance!
Henry.

Hi there

I'm using EasyTabs in an iframe at the moment and all browsers seem to be doing what I want at the moment, except Firefox. It just never seems to return 'visibility' to 'visible' and elements on the new loaded tab remains 'hidden'.

How can I fix this?

In a couple of IE9 browsers, the EasyTabs page is throwing an error:

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C)
Timestamp: Mon, 16 Jan 2012 09:11:37 UTC

Message: The specified default tab ('li:first-child') could not be found in the tab set.
Line: 2
Char: 10890
Code: 0
URI: http://os.alfajango.com/js/jquery-1.7.1.min.js

Typekit says to use the CSS below to avoid FOUT (flash of unstyled text). However for some odd reason, this CSS causes Easytabs to add "visibility:hidden" via javascript across all the tabs so none of the content is visible (other than the initial tab loaded)

Enable/disable cache on a per-tab basis.

I would like to see some added extra functionality ala ui-tabs Collapsable option

So along the lines of this demo http://jqueryui.com/demos/tabs/collapsible.html

more info here http://jqueryui.com/demos/tabs/#collapsible
and code here http://jqueryui.com/demos/tabs/#option-collapsible

Although this needs to be tied in with the default open tab option

eg you set the Collapsable option to true and do not supply a default tab number it will show all tabs collapsed

Thanks

HI,
Why not expand the settings to include an "event" option that can be set to click, mouseover, etc. to offer finer control over how tabs are switched? I achieved this with a simple, few line modification to the easytabs JS file.
Added to default options the setting "event: 'click'", then in init function set settings.bind_str to settings.event+".easytabs" then in function bindToTabClicks, bind to settings.bind_str instead of 'click.easytabs'
Then in your HTML file, use $('#tab-container').easytabs({event:'mouseover'}); as an example

hello can be add tabs and remove tabs? and add a ajax tab? :) it will be great!