Using bootstrap accordion in fancybox

Question

I just try to have the bootstrap accordion collapse event triggered inside fancy box. But i got no clue how do to that.... Do i have tu use jquery-live? Or...?

<a class="fancybox" rel="group" href="/Content/Image/Facteur/1.jpg">
   <img class="thumbnail img-responsive" src="~/Content/Image/Facteur/tn/1.jpg">
</a>
<div style="display: none;">
   <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
       simple collapsible
    </button>
    <div id="demo" class="collapse in">...</div>
</div>

<script>
    $(document).ready(function () {

    $(".fancybox").fancybox({

        beforeShow: function () {
           this.title = '<div class="myTitle">' + $(this.element).next('div').html() + '</div>';
        },
        helpers: {
            title: {
                type: 'inside'
            },
            media: {}
        }
    });
});

</script>

Answer 1

OK, the issue I see is that you are copying the next div into the fancybox title. It only copies the element but not its properties (bootstrap accordion functionality) so you have to clone it passing both, its data and events.

Then rename the ID of the target (collapsible) element (inside fancybox title) to avoid ID duplication (with the hidden element) so

try this code :

var newTitle;
$(document).ready(function () {
    $(".fancybox").fancybox({
        beforeShow: function () {
            // set variable to next div element
            newTitle = $(this.element).next('div')
            // clone it with properties
            .clone(true, true)
            // change ID to avoid ID duplication
            .find("#demo").attr("id", "demo2").end()
            // change the target to new ID
            .find(".btn.btn-danger").attr("data-target", "#demo2").end()
            // show as html
            .html();
            // override fancybox title
            this.title = '<div class="myTitle">' + newTitle + '</div>';
        },
        helpers: {
            title: {
                type: 'inside'
            },
            media: {}
        }
    });
});

See JSFIDDLE