title: bootstrap data-toggle dropdown activated by radio button
body: <p>I'm trying to open a bootstrap dropdown by clicking on a radio button but as simple as that may sound, it is giving me a hell of a day. </p>
  
  <p>According to Bootstrap, you can open the dropdown by use of hyperlink or button with <code>data-toggle="dropdown"</code> in it. You can also use <code>$('.dropdown-toggle').dropdown()</code> but the trigger must still have <code>data-toggle="dropdown"</code> for it to work. </p>
  
  <p>The problem is, radio buttons do not allow <code>data-toggle="dropdown"</code> and if I wrap the radio option inside its own hyperlink tag and add the toggle to it, then the dropdown works, but not the radio button itself and I need both to work simultaneously. The radio button will perform an action meanwhile displaying a dropdown to allow for a secondary action. </p>
  
  <p>I dumbed down the code to give a simpler example and replicate my problem. You can see in the CODEPEN that the dropdown works but the radio button does not show "Hello Offender". If you remove the <code>&lt;a&gt;...&lt;/a&gt;</code> You will see the radio button work but not the dropdown. How can I get both to work?</p>
  
  <p>Here is my code</p>
  
  <pre><code>        &lt;div class="form-group widget-header-radio-group"&gt;
              &lt;div class="radio-group inline-radio"&gt;
                  &lt;input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked&gt;
                  &lt;label for="individualForm" class="radio-custom-label"&gt;Individual&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio-group inline-radio"&gt;
                  &lt;input id="businessForm" class="radio-custom" name="radio-group" type="radio"&gt;
                  &lt;label for="businessForm" class="radio-custom-label"&gt;Business&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio-group inline-radio"&gt;
                  &lt;a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"&gt;
                      &lt;input id="offenderForm" class="radio-custom" name="radio-group" type="radio"&gt;
                      &lt;label for="offenderForm" class="radio-custom-label"&gt;Offender&lt;/label&gt;
                      &lt;ul class="dropdown-menu" id="dropdownMenu"&gt;
                          &lt;li id="stateOff"&gt;&lt;a href="#"&gt;State&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="federalOff"&gt;&lt;a href="#"&gt;Federal&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="countyOff"&gt;&lt;a href="#"&gt;County&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="indDemo" class=""&gt; Hello Individual&lt;/div&gt;  
          &lt;div id="busDemo" class=""&gt; Hello Business&lt;/div&gt;    
          &lt;div id="offDemo" class=""&gt; Hello Offender&lt;/div&gt;    
  
  $(document).ready(function () {
  
      $('#busDemo').hide();
      $('#offDemo').hide();
  
      $('#individualForm').change(function () {
          if (this.checked) {
              $('#indDemo').show();
              $('#busDemo').hide();
              $('#offDemo').hide();
          }
      });
  
      $('#businessForm').change(function () {
          if (this.checked) {
              $('#busDemo').show();
              $('#indDemo').hide();
              $('#offDemo').hide();
          }
      });
  
  
      $('#offenderForm').change(function () {
          if (this.checked) {
              $('#offDemo').show();
              $('#indDemo').hide();
              $('#busDemo').hide();
          }
      });
  
  
  });
  </code></pre>
  
  <p>See the CODEPEN <a href="http://codepen.io/LOTUSMS/pen/QEokVO" rel="nofollow"><strong>here</strong></a></p>
  
  <p>Thanks!</p>