jQuery Animation How to - Click to slide show full content

Question

We would like to know how to click to slide show full content.
Answer


<html>
<head>
    <style type="text/css">
        html {<!--from   w w w  .ja  v  a 2  s .c  o m-->
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
        }

        #page 
        {
            min-height: 100%;
            width: 100%;
            position: absolute; 
            background-color: #AAA;
        }

        #header 
        {
            padding: 1em;
            background-color: #F00;
        }

        #content 
        {
            margin-bottom: 5em;
            padding: 1em;
            background-color: #0F0;
        }

        #footer 
        {
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: #00F;
        }

        #footer > *
        {
            padding: 1em; 
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() { 
       $("button").click(function() { $("#hidden").slideToggle(1000); }) 
    });
    </script>
</head>
<body>
    <div id="page">
        <div id="header">
            <p>This is the header!</p>
        </div>
        <div id="content">
            <p>Yeah, some content!</p>
            <p>Yeah, some content!</p>
            <p>Yeah, some content!</p>
            <button>Push the footer!</button>
            <div id="hidden" style="display: none">
                <p>Begin of extra content</p>
                <p>Much hidden content!</p>
                <p>Much hidden content!</p>
                <p>Much hidden content!</p>
                <p>Much hidden content!</p>
                <p>Much hidden content!</p>
                <p>Much hidden content!</p>
                <p>Much hidden content!</p>
                <p>End of extra content</p>
            </div>
        </div>
        <div id="footer">
            <p>This is the footer!</p>
        </div>
    </div>
</body>
</html>
The code above is rendered as follows: