Display Vines in Bootstrap collapse modules

Question

I'm trying to display iFrame embedded vines in a collapse module of Twitter Bootstrap.

       <div class="panel-group visible-xs" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  <strong>VINE #1</strong><br />
                  Place de la république
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <iframe class="vine-embed" src="https://vine.co/v/OmVAQpu9MVM/embed/simple" width="100%" height="480" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
                <h3>1/20 - Place de la république</h3>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  <strong>VINE #2</strong><br />
                  Quai de Seine
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <iframe class="vine-embed" src="https://vine.co/v/OmVAQpu9MVM/embed/simple" width="100%" height="480" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
                <h3>2/20 - Quai de Seine</h3>
              </div>
            </div>
          </div>
        </div>

Problem is, it only display the one of the non collapsed panel. Probably because the server doesnt load hid Vines... I saw a solved problem quite similar to mine with google maps iframe but can't make it work for my case. :(

$('[data-toggle="collapse"]').click('show.bs.collapse', function() {
  var mapFrame = $($(this).attr('href') + ' .googlemap iframe');
  if (!$(mapFrame).hasClass('map-refreshed')) {
    mapFrame.attr('src', mapFrame.attr('src')+'');
    mapFrame.addClass('map-refreshed');
  }
});

My be the easiest way is to load my Vines when I open a collapsed panel ? But i don't how to do it...

Any help would be really appreciated.

Answer 1

The show.bs.collapse event is for the accordion so you need to attach it to the accordion.

$('#accordion').on('show.bs.collapse', function(e) { 
  var current = $(e.target).attr('id');      // current area clicked
  var vineFrame = $('#'+current+' iframe');  // find the iframe under the current clicked area

  if (!$(vineFrame).hasClass('map-refreshed')) {
    vineFrame.attr('src', vineFrame.attr('src')+'');
    vineFrame.addClass('map-refreshed');
  }
})

See Demo