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