How to make one button for open and close div, in this jquery code?

Question

 $(document).ready(function(){

      $('#content1').hide();

            $('a#open').click(function(){

            $('#content1').show('slow');

   });

   $('a#close').click(function(){
        $('#content1').hide('slow');
        })

      });

in this code of toogle open and close button is different

<a> and <a id="close">

I want to make same button <a> for open and close and want to give different background image for open and close position

Answer 1

Make your own function called ShowOrHide() and call that when the button is clicked.

In ShowOrHide, see if the div is already visible/hidden and do the opposite.

Then you'll only need one button to perform both operations.

Answer 2

Have a look at the Toggle section of the API.

Answer 3

$('a').click(function(){

        $('#content1').slideToggle();

});

If you would like to change their css ,you can re-write it in the following way.

$('a').click(function(){

       if ($('#content1').is(":visible"))
       {
            //change your css here
            //for eg. $(#content1).css('background-image', first_image);
            $('#content1').hide('slow');
       }
       else{ 
            //change your css here
            //for eg. $(#content1).css('background-image', second_image);
            $('#content1').show('slow');
       }

});

Answer 4

Check out this jsFiddle I made a while ago. (With a lot of help from SO)

Hopefully this is what you're looking for.

Hope it helps.