Page reloads on hide/show button click using jQuery

Question

I\'m using jQuery to show/hide a div by clicking on the show/hide buttons. However, my code doesn\'t work because every time it returns to the way it was before

Answer 1

A couple of things here:

1) It would be best to separate the HTML from the jQuery. 2) The default behavior for a button is to submit a form, which means it will refresh the page if there is no form action. This can be fixed with preventDefault()

To sum this up in code:

HTML

<button class="close" id="hidemultmachines" >Hide section below <img alt="Close" width="35" height="35" src="../images/close.png"> </button>

JS:

$(document).ready(function() {
$("#hidemultmachines").on("click", function(e) {
  e.preventDefault();
  $('#multmachines').hide();    
  $(this).hide();
  $('#showmultmachines').show();
});
});

Answer 2

That's because your button elements have no type specified, and by default button elements have their type set to "submit". When you click one of the buttons, they attempt to submit your form. Simply specifying a type of "button" will fix this:

<button type="button" class="close" id="hidemultmachines" onclick="..."></button>