title: bootstrap buttons onclick events
body: <p>I have 2 bootstrap buttons, I is a direct link to another page on the website and the other one I want to activate a javascript onclick event. I have no problem with a basic link but when adding it to a button it doesnt seem to work? I have included the code I am using with the link thats works but the button doesnt.</p>
  
  <p>The code is :</p>
  
  <pre><code>&lt;div style="margin-top:10px" class="form-group"&gt;
  &lt;!-- Button --&gt;
  &lt;div class="col-sm-12 controls"&gt;
  Are you already registered?
  &lt;a href='login' button type='button' class='btn btn-block btn-success'&gt;&lt;span class='glyphicon glyphicon-user'&gt;&lt;/span&gt; Login&lt;/button&gt;&lt;/a&gt;
  &lt;div class="spacing3"&gt;&lt;/div&gt;Not yet?
  
  &lt;button id='next' name ='next' type='button' class='btn btn-block btn-primary'&gt;Continue&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;a href="#" onClick="$('#loginbox').hide(); $('#1box').show()"&gt;Login here&lt;/a&gt;
  </code></pre>
  
  <p>And the js for the button is</p>
  
  <pre><code>$(document).ready(function() {
  $('#btn-next').on('click', function() {
  $('#loginbox').hide(); $('#1box').show();
  }
        
  </code></pre>
  
  <p>   </p>