jQuery Slide Down Menu to Display Content

Sometimes we don’t want to many contents congest in a web page, or we don’t want to force visitors to see some contents that may not interested to them. A good idea is to let visitors to choose whether to read the contents or not. In this case we can use a jQuery slide down menu. If visitors find some topic interesting, they can click on a menu and then the contents be slide down like a curtain.

The following is the effect of a jQuery slide down menu:

Making this jQuery slide down menu is rather easy. Here’s the file:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Slide Down Menu to Display Web Contents</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
                                
        // Load web page
        $("#slideDownMenuContent").load('example-1.html');                        
                                     
        $(".loadPage1").click(function() {
                                        
            if ( $(this).is(".loadPage1") ) {
                
                // The CSS display property of #slideDownMenuContent is set to none
                //  Show the height to display the content
                $("#slideDownMenuContent").animate({ height: 'show' });
                
                // Toggle the class
                $(this).toggleClass("loadPage1 loadPage2")
                
            } else {
                
                // Hide the height again so that the contents will be hidden
                $("#slideDownMenuContent").animate({ height: 'hide' });
                
                // Toggle the class
                $(this).toggleClass("loadPage1 loadPage2")
            }
            
        });                        
        
        
    });
</script>
</head>

<body>

<h1>jQuery Slide Down Menu to Display Content</h1>

<div id="slideDownMenuContent"></div>
    
<div style="width:302px; text-align: center; margin-bottom:10px; border-top: solid 6px #C00;">
    <input type="button" value="Click Here to View/Hide Content" />
</div>

<div>This is another block of text here.....</div>
</body>
</html>

Let’s take a look at the CSS styles of the div layer:

The CSS display property of #slideDownMenuContent div layer is set to none. Therefore this div layer will be hidden.

When the button is clicked, the height of #slideDownMenuContent div layer will be shown.

$(“#slideDownMenuContent”).animate({ height: ‘show’ });

When the button is clicked again, the height of #slideDownMenuContent div layer will be hidden again.

Therefore the #slideDownMenuContent div layer will be slide down and up when the button is clicked.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>