How to hide a div on a click and uncheck it on another click?

advertisements

i am wanting to add an else statement to my javascript, currently if a user clicks a link then a div hides, but i want it so that if they click the link again the div unhides. can someone please show me how i might do this thanks?

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"><h3 id="bobcontent1-title" class="handcursor"><img src="assets/img/help_support/howdo.png" width="302" height="45" /></a>

<script>
function myLinkButtonClick()
{
    $(".nswp-frame2").hide();
}
</script>


Since it seems you're using jQuery, you could simply use the toggle() method.

For example:

$('#myLink').on('click', function() {
    $(".nswp-frame2").toggle();
});

The toggle() method shows and hides the element interchangeably, depending if the element is currently visible or hidden.

As a side note, mind how this example binds a handler to the click event with the on() method in an unobtrusive manner, instead of the obtrusive (inline) code in your example. This also means that this snippet should be part of a separate script declaration and preferably executed after page load. So a more complete example would be:

<script type="text/javascript">
    $(document).ready(function() {
        $('#myLink').on('click', function() {
            $(".nswp-frame2").toggle();
        });
    });
</script>