JQuery Modify So it Toggles

Question

У меня есть эти функции, чтобы показывать и скрывать контент в скрытом div. Как я могу это сделать, поэтому мне нужно использовать только одну кнопку, которая откроется и закроется?

<script type="text/javascript" src="js/jquery.js"></script> 
    <script> 
    jQuery(document).ready(function() { 
     $('.pagesplit').click(function() { 
      $('.page-split-wrap').css({'display': 'block'}) 
      $('.page-split-wrap').animate({height: '250px'}, 500); 
     }); 

     $('.pagemerge').click(function() { 
      $('.page-split-wrap').animate({height: '0px'}, 500, function() { 
       $('.page-split-wrap').css({'display': 'none'}); 
      }); 
     }); 
    }); 
    </script> 

Answer 1

Если вы не хотите использовать устаревшую .toggle(), вы можете иметь обработчик кликов альтернативные, которые функционируют они используют так:

jQuery(document).ready(function() { 
    var showContent = function() { 
     $('.page-split-wrap').css({'display': 'block'}) 
     $('.page-split-wrap').animate({height: '250px'}, 500); 
     // Switch handlers 
     $('.pagesplit').unbind('click'); 
     $('.pagesplit').click(hideContent); 
    }; 

    var hideContent = function() { 
     $('.page-split-wrap').animate({height: '0px'}, 500, function() { 
      $('.page-split-wrap').css({'display': 'none'}); 
     }); 
     // Switch handlers 
     $('.pagesplit').unbind('click'); 
     $('.pagesplit').click(showContent); 
    }; 

    $('.pagesplit').click(showContent); 
}); 

Answer 2

Используйте .toggle событие, вместо .click.

jQuery(document).ready(function() { 
    $('.pagetoggle').toggle(function() { 
     $('.page-split-wrap').css({'display': 'block'}) 
     $('.page-split-wrap').animate({height: '250px'}, 500); 
    }, function() { 
     $('.page-split-wrap').animate({height: '0px'}, 500, function() { 
      $('.page-split-wrap').css({'display': 'none'}); 
     }); 
    }); 
});