CODEWITHSUNDEEP
jquerycssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152637

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

 $(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

Upvotes: 0

Views: 2728

Answers (4)

Kai
Kai

Reputation: 2987

$('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');
       }

});

Upvotes: 6

Kyle
Kyle

Reputation: 67194

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.

Upvotes: 0

Blair McMillan
Blair McMillan

Reputation: 5349

Have a look at the Toggle section of the API.

Upvotes: 3

NibblyPig
NibblyPig

Reputation: 52932

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.

Upvotes: 0

Related Questions