You have placed the script code before the HTML elements. hide_show is not there yet when you declare #hide_show.
You should either put the script code inside $( document ).ready() or after all the HTML elements.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#hide_show').click(function () {
alert("hello");
var value = $('#hide_show').attr('value');
$('#message').toggle('fast');
if (value == 'Hide') {
$('#hide_show').attr('value', 'Show');
}
else if (value == 'Show') {
$('#hide_show').attr('value', 'Hide');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="hide_show" type="button" value="Hide" />
<p id="message">This is paragraph </p>
</div>
</form>
</body>
</html>
$( document ).ready()[
^]