div elements inside tabs Created Jun 16, 2009

Having same issue,
Temporal solution: use P and avoid the div inside the tabs.

Using paragraphs is not an option for me. Currently I'm thinking to build a new tab plugin, because I haven't found one using jQuery, that is fitting my needs.

I have the same problem as well.. The page tab remains empty when trying to load an external .php page which uses <divs>..

The issue seems to be that every <div> tag is set to display:none when initialized. That includes, properly, every <div> tag immediately under the <div class="panes"> tag. But it also includes all <div> tags nested inside, arbitrarily deep.

Looking at the code in tools.tabs-1.0.1.js, I note that the functions that show() and hide() only seem to work on the second-level <div> tag, setting the "display" attribute to block when showing and "none" when not. Nested <div> tags aren't touched.

So the question becomes, "what is setting nested <div> tags to display: none in the first place? Turns out that it's the CSS specific to the divs in question. The CSS line beginning with "div.panes div" has a display: none that is affecting ALL divs. Taking this line out renders all divs and also allows the initialization code to only work on the second-level div.

Your other option, of course, is to assign a class to the second-level <div> and add that class to the CSS. All further, nested <div> elements, not being a member of that class, won't pick up the display: none attribute.

I just started using this toolset yesterday and immediately ran into this, so I'm glad I could help out here.

man this is soo stupid that it hides nested div elements by default... really a bit poor especially considering there is not mention of this shortcoming in the demo notes... wasted loads of time trying to figure wtf was going on with ajax tab pages not working properly!!!

Rather than

div.panes div { display:none; etc... } for the pane styling, use

div.panes > div { display:none; etc... }

and it will only apply to the first div in a pane.

Worked great for me, thanks much!

Thanks, this hack saved the day!

Hi all,

It was quite a relief to find the solution to this issue from the forums so quickly. I am quite new to jQuery and figured out the CSS display: none was causing my content not to show. I had no idea how to get around this by changing something in the jQuery Tools source.

Using the CSS property selector > did the trick in my case. Awesome, had been wondering about this for a couple of days now. Thanks!

Thank you for this, this was being very annoying and took me hours to figure out.

I tried that, but it does not work for me..
I only see the first <div>, but not all others, even if I modify the CSS styles with "div.panes > div { display:none; etc... }"

Could you help me please?

I've just come across this problem as well and think I've found a fix for it.

On the div elements that act as the holder for the panes set the css class to equal "holder" so that the html looks like this:

<div class="panes">
<div class="holder">
Pane 1
<div>
<b>James</b></div>
</div>
<div class="holder">
Pane 2<div>
<b>Julie</b></div>
</div>
<div class="holder">
Pane 3<div>
<b>Helen</b></div>
</div>
</div>

Then the CSS that has to appear on the page, set that to:

<style type="text/css">
div.panes div.holder
{
padding: 15px 10px;
border: 1px solid #999;
border-top: 0;
height: 100px;
font-size: 14px;
background-color: #FFFFFF;
}
</style>

That should now allow you to put divs inside your tabs.

Hope that helps.

James

My goodness, thank you for that! I could not for the life of me figure it out either, but this worked! Maybe there should be some demos combining the effects, to help us figure it out a bit easier (for those of us who are beginners at js and jquery).

I signed up just to post this comment!! :)

Is it possible to get this to work without putting limiting style sheets on the same page?? These seems like such a simple task (putting divs on tabs). I've done everything on this page and I still cannot get sub-divs to work. I have an example athttp://www.madetoorderwebsites.com

Basically the tabs just don't fire and I see all the content at once. If I take out the sub-divs, it works fine.

<ul class="tabs">
LINKS HERE

<div class="panes">

<div class="holder">
<div class="sub_class_1">
<div class="sub_class_2">
CONTENT HERE
</div>
</div>
</div>

<div class="holder">
<div class="sub_class_1">
<div class="sub_class_2">
CONTENT HERE
</div>
</div>
</div>

</div>

$("ul.tabs").tabs("div.panes > div");

I had this PHP script echoing code inside of one of the tabs...

<script type="text/javascript">
$(document).ready(function(){
$('#{$name}').datepicker({ dateFormat: $.datepicker.W3C + date_obj_time, constrainInput: true, currentText: 'Now', changeYear: true, yearRange: '2009:".date("Y")."' });
});
</script>

I removed that javascript and the tabs started working, even with the nested divs.

I posted a working page onhttp://www.madetoorderwebsites.com/site/nashville-web-design (notice I used 4 tabs with the last tab having a full blown customer input) with a HUGE form and nested divs going down 12 levels (stupid I know, but I am using a form generator and thats what it's outputting right now). Another 6am night figuring out a tool.

I also found this link that can help anyone else in the same position:

http://stackoverflow.com/questions/3066539/jquery-flowplayer-tabs-content-inside-div-tags-not-displaying This guy also posted a completely functional page that works using cut/paste and then regressing into your own situation.

Between his and mine, this should fix nearly any issue someone could face getting these tabs to work.