Using Twitter Bootstrap library - it is sometimes necessary to trigger a drop down control on another element (e.g. button). The span "pseudo-toggle" wraps the textbox "title" that will contain the selected title value (Mr or Mrs). Normally the user is expected to click on the button "title-button" to select the drop down. Now they can click any…

Bootstrap - allow other element to trigger click of button for drop down menu

 <div class="controls">
  <div class="input-append">
    <!-- gender -->
    <span id="pseudo-toggle"><input name="title" id="title" type="text" required="" disabled="disabled"  /></span>
    <div class="btn-group">
      <button id="title-button" class="btn dropdown-toggle" data-toggle="dropdown">
        <img src="images/mobile/btn-dropdown.gif" alt="" /></button>
      <ul class="dropdown-menu">
        <li><a href="#">Mr</a></li>
        <li><a href="#">Mrs</a></li>
      </ul>
    </div>
  </div>
</div>