Jquery to show and hide on button click and also move the button on the same click

Question

I'm a beginner with Jquery, I've managed to get a button to show the div and the button to move to the right when the div is shown. I've seen similar questions for toggling visibility, etc but I also need to move the button on click but I have tried to follow their logic to get it to work with no success.

But when I do the opposite for when it's clicked again (hide the div and move the button back) I can't get it to work.

Can someone tell me where I'm going wrong?

Html

<button id="myfilterFunction">Show/Hide</button>

    <div id="filterview">
    <?php echo $column_right; ?></div>
    </div>

Javascript

<script>
        $( "#myfilterFunction" ).click(function() {                                 
            if ($( "#filterview" ).css('display', 'none')) {
            $('#filterview').show();
            $( "#myfilterFunction" ).css('margin-left', '300px');
            }

           if ($( "#filterview" ).css('display', 'block')) {
            $('#filterview').hide();
            $( "#myfilterFunction" ).css('margin-left', '0');
            }
            });
</script>

Answer 1

You are not checking the visibility of the element correctly. You should use .is(":visible") to check an element's visibility (using jQuery) and process the code accordingly:

$("#myfilterFunction").click(function () {
    // If the element is visible
    if ($("#filterview").is(":visible")) {
        // Code to process
        $('#filterview').hide();
        $("#myfilterFunction").css('margin-left', '0');
    } else {
        // If the element is not visible
        $('#filterview').show();
        $("#myfilterFunction").css('margin-left', '300px');
    }
});

$("#filterview").css('display', 'none') is used to actually SET the css display attribute of the element.