Question

I have these functions to show and hide content in a hidden div. How can I make it so I only need to use one button that will open and close?

<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

If you don’t want to use the deprecated .toggle(), you can have your click handlers alternate which function they use like so:

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);
});