jQuery or CSS trouble - looks like jQ?

Yes, but we now have more information to help us out with.

You will find that it’s the h2 headings within the dummy content of the inner tabs that are causing the trouble.

Hmmm… I took out all the h2’s and it is working nicely, but why? I thought the js is calling for h2’s?

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});

There are two types of h2’s that you’re dealing with. The ones for the accordion are ok, the ones that you have as “doesn’t show up” content for the inner tabs are not okay.

Here is one of the accordion panes, trimmed and showing notes about which h2 headings are ok, and which ones are not.


<div id="accordion">
    <h2 class="current">Monday</h2> <!-- okay -->
    <div class="pane">		
        <ul class="css-tabs"> 
            <li><a href="1.html">8:00-9:00</a></li> 
            ...
        </ul> 
        <div class="css-panes"> 
            <div style="display: block;"> 
                <h2>Ajax page #1</h2> <!-- not ok, delete -->
                <p>This doesn't show up ... </p>
            </div> 
        </div> 
    </div>

AHA!:lightbulb Thank you so much Paul! Now I see :D. I get it, but the weird part is that the errant H2’s came from the demo code I started with and it works for them… :confused:

I have another puzzler, but I’ll start a new thread for that one.

The demo code showed tabs within tabs. Things work a bit different when it’s tabs within accordions.

Glad to hear.

Gotcha! (did that sound New Zealandish?)

Off Topic:

I’m not really sure, I spend more time with people overseas than NZers :slight_smile:

Bonus question:

Is there a way to link from another page to the page with the accordion so that a specific area of the accordion is opened on page load?

For example: Click here to see Tuesday’s schedule

Something like a target tag.

That would be related to the tab.history that they provide, where the fragment identifier is used to specify which tab is to be shown.

I’ve read that and am not knowledgeable enough to understand it.

Doesn’t each <h2> need to have some sort of target attribute so that it opens when a link with that attribute is clicked on another page?

That’s right, you would have id=“monday” and id=“tuesday” on the headings, and I think you may require .history(); on the end of the accordion script.

So close but ugggggggh…

Here is the js at the top:

<script type="text/javascript">
$(function() { 

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null}).history();
});
</script>

Here is a sample of an accordion section with the ID:

    <h2 id="ricardo">Ricardo</h2>
    <div class="pane">
        <img src="http://static.flowplayer.org/img/title/javascript24.png" alt="JavaScript tools" style="float:left; margin:0 15px 15px 0" />
        <h3>Lorem ipsum dolor</h3>

It pops the accoridion open, but always the first section and not the targeted section.

Here is the named link:

<a href="instructors.html#ricardo">Ricardo</a></p>

So close…:nono:

It looks like the history part is only for tabs, not accordions.

We’ll have to fake it, by getting the fragment identifier, searching the headings for it and working out an initial index to begin with.


$(function() { 
    var id = location.hash.split('#')[1],
        initialIndex = 0;
    if (location.hash > '') {
        $('#accordion h2').each(function (index) {
            if (this.id === id) {
                initialIndex = index;
            }
        });
    }
    var api = $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: initialIndex});
});

BRILLIANT! Thank you so much Paul - it works wonderfully. :slight_smile: :slight_smile: :slight_smile:

[FONT=Helvetica, Arial, sans-serif]I updated this page and have a conflict due to the tabs using their own jQuery and a menu I added using the standard jQuery core. I can only get one or the other to function properly at a time.

Currently the accordion is not opening because I have it’s link to the custom jQuery they provide commented out. If you uncomment it the menu falls apart.

My test page is at: [/FONT]http://ehydrant.com/jsproblem/jsproblem.html

The accordion demo is at:
http://flowplayer.org/tools/demos/tabs/accordion.html

It’s really disappointing to get this far and have it crash to pieces. Any thoughts are much welcomed.