Jaxon Crosmas Jaxon Crosmas - 1 month ago 4
CSS Question

JavaScript is not working on my html document

I have a button on my HTML document as listed below

<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">


And I have this block of jQuery at the bottom of the document. It is supposed to fade in the div with the id "gold" when the button is clicked.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow');
});
});
</script>


However the code does not seem to work/trigger and nothing happens. Any suggestions to why this is happening is greatly appreciated.

Note: display: none is applied to the "gold" div in css, but I want the div to fade in once the button is clicked.

Answer

Split up your script tags:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeOut('slow');
  });
});
</script>

Edit: JSFiddle