Divs within tab content Created Aug 12, 2010

Because the div.panes class has the display property set to 'none'. I am still trying to work out an override...

I use a wrapper div for my content.
Then use the following css to make it visible.

#tabbed-wrap, #tabbed-wrap div { display:block; border:none; }

<div id="tabbed-wrap">
	<div class="another-div">
           content here
        </div>
        <div class="another-div">
           content here
        </div>
    more text
</div>

I also found that explicity targeting the inner divs with the following worked well to remove any padding, extra stuffing from the parent style.

.css-panes .another-div { padding:0; }

I too would be very interested in seeing an override. I tried the wrapper solution suggested jqueryMan and that only partially worked depending on what I was doing inside the wrapper div.

Yeah, this one is driving me nuts, too. I shouldn't have to call out the specific nested DIVs to force them to be visible.

With the .tabs() creation, it should only be iterating through what the jQuery selection is.

I use

.tabs("div.panes > div.pane")

You'd think that it'd only grab DIVs classed as pane inside the div named panes. But unfortunately, it's display:none-ing every div in there.

edit:
I actually realized it was my own doing. In my CSS, I had

/* tab pane */
.css-panes div {
	display:none;
...

...which was hitting every DIV inside .css-panes.

I changed it to:

/* tab pane */
.css-panes div.css-pane {
	display:none;
...

My suggestion - take a look at your class object for your panes container. Make sure it's not nailing every DIV inside. Class out your individual panes specifically.

/* tab pane */
.css-panes div.css-pane {
	display:none;
	border:1px solid #666;
	border-width:0 1px 1px 1px;
	min-height:150px;
	padding:15px 20px;
	background-color:#fff;	
}

		<div class="css-panes">
			<div class="css-pane"><b>JASON</b><div><b>TEST</b></div>First tab content. Tab contents are called "panes"</div>
			<div class="css-pane">Second tab content</div>
			<div class="css-pane">Third tab content</div>
		</div>

I used the above coding exactly, but it still seems to break down with too many nested divs. I have one that is 3 deep and it's causing the issue again. Incredibly frustrating.