Loading an iFrame inside a closed jquery accordion section

Question

I've been reading threads (specifically this one: iFrame inside Jquery accordion) and still not finding (or not understanding) how to get the Spotify playlist I have hidden in a closed accordion section to fully load on page load.

Many solutions have been offered that I've tried, so far, nothing has done the trick (probably due to my JS noobness). I'd appreciate any insight. Please do be specific about where to put what as I'm very new at Javascript.

JS:

<script>
     $(function() {
     $( "#accordion" ).accordion({
                collapsible: true,
            autoHeight: false,
            alwaysOpen: false,
            active: true
                });
            });
 </script>

Relevant HTML:

<h3 id="bubble">The Bubble Creatures</h3>
<section id="bubble">
    <div id="bubble-story"><p>Blah blah</p></div>
    <iframe id="spotify" src="https://embed.spotify.com/?uri=spotify:user:seedpodpub:playlist:4MsCt5Fkg5G99Tb5VFqzQ4" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</section>

Thank you again! o.

UPDATED WITH MORE INFO:
Essentially, I want to do this:

If the section style is "#section1 {display:none;}" then do nothing.
If the section style is "#section1 {display:block;}" then trigger the div #spotify to load.

This should overcome the half-loading issue I'm seeing with the hidden iframe (I hope)? I'm looking at this post: Event detect when css property changed using Jquery, again, failing to implement the suggested solution.

Since I haven't found any answers to this in the past several days, I'm going to try coming at it from a different approach. Thanks anyway. Opening a new thread... — onomiko, Dec 02 '12 at 03:14
I've resolved this situation by changing opacity and position with a backup of display. For the results, see this thread: http://stackoverflow.com/questions/13814436/jquery-css-not-working-only-in-chrome — onomiko, Dec 15 '12 at 18:15

score 0 · Answer 1 · edited Aug 25 '14 at 02:28

It seems like you have found your way out of this but for others I suggested a rather easy solution for this.

I was trying to load my Google map api into an iframe which was inside the jQuery Accordion. The problem is if you load the accordion as closed, the iframe never loads so if you try to open the accordion you wont see anything in it.

The solution is that to load the accordion as open or active first (active: '0') and then use this code to close your accordion as soon as the page gets loaded:

$("#accordion-map").accordion(
  {
    active: 'none'
  }
);

So what happens is that when you declare your accordion its open and the above code close it right after ;) so you never see it open.

Worked for me just fine in both Chrome and FireFox.

Loading an iFrame inside a closed jquery accordion section

1 Answers1