I am using http://bootstraptour.com/ to do a tour of features in an application.
I am trying to get the tour to work with a native bootstrap dropdown. The dropdown contents are hidden and when the tour gets to that step I am adding the CSS class "open" on the dropdown which is what happens when you click on it. (standard bootstrap behavior)but it does not open.
I have tried everything to try to get the tour attach to the hidden element by first showing it but nothing seems to work. I have created a fiddle so you can see what I am trying to explain.
// Instance the tour
var tour = new Tour({
debug: true,
storage: false,
steps: [{
element: "#step1",
title: "Settings",
content: "Content of settings",
placement: "bottom",
}, {
element: "#step2",
title: "Title of my step",
content: "Content of my step",
placement: "bottom",
}, {
element: "#step3",
title: "Title of my step",
content: "Content of my step",
placement: "bottom",
onHidden: function() {
$(".dropdown").addClass("open");
},
}, {
element: "#step4",
title: "Title of my step",
content: "Content of my step",
placement: "bottom",
onShow: function() {
$("#dropdown").addClass("open");
},
}]
});
if (tour.ended()) {
tour.restart();
} else {
tour.init();
tour.start();
}
http://jsfiddle.net/rdoddXL/ku0fx7gq/2/
Any help would be appreciated
Thanks