Question

I have two functions in jQuery to hide and then show a header, and also swap the buttons out so that when the header is hidden, the “show header” button appears, and vice versa. They are as follows:

$('#close_header').click(function() {
    $('#header').animate({ top: '-=150px' }, 500);
    $(this).toggle();
    $('#open_header').toggle();
});

$('#open_header').click(function() {
    $('#header').animate({ top: '+=150px' }, 500);
    $(this).toggle();
    $('#close_header').toggle();
});

The markup to go along with is as follows:

<img src="images/close.png" id="close_header" class="header_control fadein button">
<img src="images/open.png" id="open_header" class="header_control fadein button">
<div id="header">
    *Header content.*
</div>

Is there any way to combine those two functions into one for neatness and efficiencies’ sake?

Answer 1

There is absolutely no performance difference.

If you try to write it all in one function with parameters it will only be less readable.

Keep it that way, it’s fine.

Now answering your question:

Is there any way to combine those two functions…

Yes

Is there any way to combine those two functions into one for neatness and efficiencies’ sake?

No. Read the codes in the other answers, are they neater? are they more efficient? NO