Open Bootstrap dropdown menu after tour "next button" is clicked

[vargasnorman]

Hi,

I'm having some issues, I need to open a bootstrap dropdown menu as part of one of the steps of the tour. It looks like the dropdown gets clicked internally because the color has a sligh change but it doesn't open. I was reading about stopPropagation but I couldn't make it work. Any help will be greatly appreciated.

var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "dateInfo",
          placement: "left"
        },
         {
          title: "Open Search filter",
          content: "Here is where I put my content.",
          target: "btnNewMessage",//document.querySelector("#content p"),
          placement: "right",

          onNext: function() {
                $("#btnNewMessage").dropdown('toggle');
            }
        },
         {
          title: "My Header",
          content: "This is the header of my page.",
          target: "dateInfo",
          placement: "left"
        }

      ]
    };

<div class="container-fluid">
<ul class="list-group">

    <li class="list-group-item active">
        <div class="btn-group">

    <button id="btnNewMessage" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <strong>New Message</strong> <span class="caret"></span>
    </button><ul class="dropdown-menu">
        <li><a href="/login/app/facility/msgs/send/form/?t=adm">Admission</a></li>
<li><a href="/login/app/facility/msgs/send/form/?t=bld">Blood Work</a></li>
<li><a href="/login/app/facility/msgs/send/form/?t=chg">Change In Condition</a></li>
<li><a href="/login/app/facility/msgs/send/form/?t=inr">INR Report</a></li>
<li><a href="/login/app/facility/msgs/send/form/?t=uacs">UA C&amp;S Result</a></li>
<li><a href="/login/app/facility/msgs/send/form/?t=ult">Ultrasound/Doppler</a></li>
<li><a href="/login/app/facility/msgs/send/form/?t=xray">X-Ray</a></li>
<li role="separator" class="divider"></li>
<li><a href="/login/app/facility/msgs/send/form/">General</a></li>
    </ul>
</div>

If I place the line $("#btnNewMessage").dropdown('toggle'); outside the tour json object it opens the dropdown fine.

Thanks in advance!

[timlindvall]

Sorry, I haven't worked with Bootstrap dropdowns, so I'm not sure why the behavior is different between both contexts.

This doesn't appear to be an issue with the Hopscotch library, so closing.