Open an accordian panel with a function

Question

ok here is the full code with the spelling corrections and everything. I am still getting an error.

code for parent is :

$("#leftNav").accordion({autoHeight: true});

<div id="leftNav">    <h3><a href="#">Client</a></h3>
<div>        static text    </div>
<h3><a href="#">Account Summary</a></h3>
<div>        static text    </div>
<h3><a href="#"> Profile</a></h3>
<div>        static text    </div>
<h3><a href="#">trip</a></h3>
<div>
    <div id="tripHolder">
    </div>
</div>

the code for the iFrame :

$(".bookingClass").click(function(){
     var thisBookingClass = 'bClass='+$(this).attr("id");
           $.ajax({
                type:"POST",
                url:"bookIt.jsp",
                data: thisBookingClass,
                cache:false,
                success: function(msg) {
                    $("#tripHolder",top.document).html(msg);
                    $("#leftNav",top.document).accordion('activate',3);
                 }
           });
});

The error I am getting in fire bug is now

$("#leftNav", top.document).accordion is not a function

Answer 1

Could it be the typo of accordion vs accordian?

Answer 2

you've spelt accordion wrong in your code.

EDIT:

I have a Working Demo that works in Firefox (tried in IE6 but it failed), only if the "client" header is the one currently selected. You can see the code by adding /edit to the URL.

This seems to be a tricky problem to solve and unfortunately I don't have the time to look into it further at the moment. To prevent the error

$("#leftNav", top.document).accordion is not a function

I had to add a reference to the jQuery UI script to the source of the iframe.

It appears that the accordion becomes inaccessible from inside the iframe, the reason I'm not sure. The way that I got the activate to work was very hacky and basically called .accordion() on the #leftNav again, followed by .accordion('activate',3); as in the following

$.ajax({
  type:"POST",
  url:"http://jsbin.com/etiju",
  data: {},
  dataType: 'html',
  cache:false,
  success: function(msg) {
    $('#tripHolder',parent.document).html(msg);
    $("#leftNav",parent.document).accordion({ autoHeight:true }).accordion('activate',3);
  }                                
});

notice that I also used parent.document instead of top.document - the latter wasn't working but normally does in Firefox.

I hope it's got you a little further along. I may come back to this one when I have more time.

Answer 3

Original post fixed