title: Page reloads on hide/show button click using jQuery
body: <p>I'm using jQuery to show/hide a <code>div</code> by clicking on the show/hide buttons. However, my code doesn't work because every time it returns to the way it was before when I click on my buttons. I'm almost sure that this is due to a page reload, because every time I click on a button it reloads the page.<br>
  Does anybody know what could be the reason behind this?  </p>
  
  <p>Here is the important chunk of code:</p>
  
  <pre><code>&lt;form role="form" method="post" action="./something.php"&gt;
    ...
    &lt;button id="hidemultmachines" onclick="$('#multmachines').hide(); $(this).hide(); $('#showmultmachines').show();"&gt;
      Hide section below ...
    &lt;/button&gt;
    &lt;button id="showmultmachines" onclick="$('#multmachines').show(); $(this).hide(); $('#hidemultmachines').show();"&gt;
      ... Create multiple entries
    &lt;/button&gt;
    &lt;div id="multmachines"&gt;
      ...
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;input type="hidden" name="total" value="{ $smarty.section.i.total }"&gt;
        &lt;button type="submit" name="Submit" value="Save"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is my jQuery code in the header:</p>
  
  <pre><code>$(document).ready(function(){
      $('#hidemultmachines').hide();
      $('#multmachines').hide();
  }
  </code></pre>
  
  <p>When I put the buttons outside the form it works. Why?</p>