Problem using Accordion with embedded media player

Problem using Accordion with embedded media player

Community,

I have a page which heavily utilized jQuery and some of it's plugin's.

The layout is utilizing jQuery.UI.Layout.
One 'pane' on the page utilizes two jQuery.UI widgets: Tabs and an Accordion.

So, on the east 'pane', there is a tabview with 3 tabs; the 3rd tab contains an accordion.
The accordion contains embedded media player objects, such that each video is in it's own section of the accordion.

On page render, everything looks great! Clicking on the 3rd tab, you can see the accordion, with it's first section opened, and the video file starts playing.

The problem arises when the user clicks on any other section header of the accordion. The first section never closes, the section you click on never opens. So you're stuck looking at the 1st section of the accordion no matter what you do.

JavaScript is as follows:

  1. $("#accordion").accordion({collapsible: true, header: 'h3'});

HTML is as follows:

  1. <div id="tab3">
  2.       <div id="accordion">
  3.             <h3>Section Title</h3>
  4.             <div>
  5.                   <object id="mediaPlayer"  width="100%" height="334px"
                                        classID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
                                        standby="Loading Windows Media Player components..."
                                        type="application/x-oleobject">
                                    <param name="fileName" value="someFile"/>
                                    <param name="autoStart" value="true"/>
                                    <param name="showControls" value="true"/>
                                    <param name="showStatusBar" value="false"/>
                                    <param name="showDisplay" value="false"/>
                                    <embed src="someFile" width="100%" height="334px"









  6.                                     type="application/x-  mplayer2" ></embed>
                     </object>
  7.             </div>
  8.       </div>
  9. </div>

For the life of me, I can't figure out what's going wrong. I'm pretty sure I've set everything up properly. I'm thinking maybe jQuery accordion just doesn't like certain stuff inside it? I've also tried a similar set up, where inside the accordion sections are javascript marked-up data tables (from a different library); same kind of result.

Any pointers, comments, suggestions would be highly appreciated. Thanks in advance.