Jquery not working - trying to show / hide div when a button is clicked
Hi, can anyone help. I can't figure out why this isnt working.... I have a div called #overlay that is currently hidden. It covers the whole page and has a form inside. I want to make it visible when a button on the page is clicked.
<div id="changingchange">
<div id="overlay">
<div id="form">
<!-- form here -->
</div>
</div><!--overlay-->
<div class="inner">
<div class="page">
<div class="button">Show form</div>
</div>
</div>
</div><!--changing-change-->
<script type="text/javascript">
$(function () {
$('.button').click(function () {
$(this).parent('#changingchange').find('#overlay').css('display', 'block');
});
});
$(function () {
$('p.close').click(function () {
$(this).parent().find('#overlay').css('display', 'none');
});
});
</script>
Any suggestions will be appreicated..
Kelly