CODEWITHSUNDEEP
jqueryhtmlcss
JerryFox
JerryFox

Reputation: 625

How to open dropdown menu on a button click? html

I am trying to have a drop down menu on the navigation bar to open up when a button is pressed. Currently got: 

<script>
  $('#broadcaster').click(function() {

      $('#menu2 a').dropdown("toggle");
  });

</script>

Broadcaster being the button ID & menu2 the ID for the list of the dropdown. Right now, it shows the menu being clicked when the button is clicked but the menu does not open up. Also tried various like $('#menu2 a').click(); Rather avoid more css, any suggestions?

Here is the drop down element: 

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown" id="menu2">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">
       Register
       <b class="caret"></b>
     </a>
     <div class="dropdown-menu">
       <form role="form" action="/user/create" method="post">
         <fieldset id="menu4" class='textbox' style="width: ; padding:10px;">
          <div class="form-group">
            <label for="newNameInput">Name</label>
            <input type="text" class="form-control" name="name" id="newName" placeholder="Name">
          </div>
          <div class="form-group">
            <label for="newEmailInput">Email address</label>
            <input type="text" class="form-control" name="email" id="newEmail" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="newPasswordInput">Password</label>
            <input type="password" class="form-control" name="password" id="newPassword" placeholder="Password">
          </div>
          <li class="divider"></li>
          <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" value="Sign Up" id="signup" type="submit" />
        </fieldset>
      </form>
    </div>
  </li>
</ul>

Upvotes: 2

Views: 27252

Answers (3)

Dheeraj
Dheeraj

Reputation: 318

Try this

$(document).ready(function() {
 $('.dropdown').click(function() {

      $('.dropdown-menu').slideToggle();
  });
 });

Upvotes: 3

Amit
Amit

Reputation: 15387

Try this

 $('#broadcaster').click(function() {

      $('#menu2 a').bind('click',functionName());
  });

Define functionName below, it will work.

Upvotes: 1

kamesh
kamesh

Reputation: 2424

you are missing this.. try

$(document).ready(function(){
 $('#broadcaster').click(function() {

      $('#menu2 a').dropdown("toggle");
  });
});

Upvotes: 0

Related Questions