Hi all,

I've got a weird stylesheet issue, triggered by the Ext TabPanel.

I have a simple hidden/shown function that just changes the class of a div element between display:inline or display:none, when clicked. This is an old, pre-Ext conversion, function in our app that is used pervasively, so whenever we put tabs on a page (which are becoming pervasive...at least they will be once this problem is fixed). The problem is that when the hideable div contains a TabPanel it gets "element.style" set to display: none;, so the opening click doesn't do anything...it changes the div class. I can see all of this clearly in FireBug ("All hail FireBug!"), but I don't understand why the TabPanel is effecting it's parent element in addition to it's own element.

Here's a minimal test case that exhibits the problem:

Code:
<html>
<head>
<link rel='stylesheet' type='text/css' href='/ext-1.0-alpha2/resources/css/ext-all.css' />
<link rel='stylesheet' type='text/css' href='/unauthenticated/layout.css' />
<script type='text/javascript' src='/ext-1.0-alpha2/yui-utilities.js'></script>
<script type='text/javascript' src='/ext-1.0-alpha2/ext-yui-adapter.js'></script>
<script type='text/javascript' src='/ext-1.0-alpha2/ext-all.js'></script>
<title>Tabs Test Page</title>
</head>
<body>
<style>
.opener_shown {display:inline}
.opener_hidden {display:none}
</style>
<script>
// Open or close a hidden section
function hidden_opener(divid, openerid)
{
var divobj = document.getElementById(divid);
var openerobj = document.getElementById(openerid);
if (divobj.className == 'opener_shown') {
  divobj.className = 'opener_hidden';
  openerobj.innerHTML = '+';
  }
else {
  divobj.className = 'opener_shown';
  openerobj.innerHTML = '-';
  }
}
</script> 
<script>
Tabs = function() {
  return {
    init : function(){
      var tabs = new Ext.TabPanel('simplemode');
      tabs.addTab('simple', "Basic mode");
      tabs.addTab('complex', "Advanced mode");
      tabs.activate('simple');
    }
  }
}();
Ext.EventManager.onDocumentReady(Tabs.init, Tabs, true);
</script>
+ Open/Close
<div class='opener_hidden' id='hiddendiv_table3'>
  <div id='simplemode'>
    <div id='simple' class='tab-content'>
      Blah Blah
    </div>
    <div id='complex' class='tab-content'>
      Nah Nah
    </div>
  </div>
</div>
</body></html>
If you remove either the div opener_hidden, or the function to build the tab, the other bit works. Or, if you put the tabs outside of the opener_hidden everything works.

Anyone have a clue they can lend me?

If there's an Ext-friendly way to accomplish this kind of section hiding (in a very simple markup-based way, preferably), that'd be cool too.