Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hiding div with slideDown() in JQuery?

    slideUp() works when trying to hide a div in JQuery but I want to use slideDown(), is this not possible?

    Thanks!

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    45
    Thanks
    0
    Thanked 6 Times in 6 Posts
    I tried it too and it didn't work...

    So I wrote this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            
            <title>Untitled Document</title>
            
            <!--jQuery 1.3-->
            <script src="js/jquery/jquery-1.3.min.js" type="text/javascript"></script>
            
            <!--jQuery UI 1.6rc4-->
            <script src="js/jquery/jquery-ui-1.6rc4.min.js" type="text/javascript"></script>
            
            <style>
    			div#box-container {
    				overflow:hidden;
    			}
    		
    			div#box {
    				position:relative;
    				background:red;
    			}
    		</style> 
            
            <script>
    			$(function() {
    				$("#hideLink").click(function(event) {
    				
    					event.preventDefault();
    					
    					// Get our elements
    					myBox = $("#box");
    					myBoxContainer = $("#box-container");
    					
    					// If shown
    					if(myBox.hasClass("visible")) {
    					
    						// Change 'top' of inner DIV to height of outer DIV
    						myBox.animate({
    							top:myBoxContainer.height() 
    						},1000,function() {
    						
    							// Change Height of outer DIV to 0px
    							myBoxContainer.animate({
    								height:'0px'
    							},1000);
    						});
    						
    						// Change Link Text
    						$(this).html("Show Box");
    						
    						// Set the class to hidden for the toggle				
    						myBox.attr("class","hidden");
    						
    					} else {
    					
    						// Change outer DIV height to height of inner DIV
    						myBoxContainer.animate({
    							height:myBox.height()
    						},1000,function() {
    						
    							// Change 'top' of inner DIV to 0px
    							myBox.animate({
    								top:'0px' 
    							},1000);							
    						});	
    						
    						// Change Link Text				
    						$(this).html("Hide Box");
    						
    						// Set the class to visible for the toggle 
    						myBox.attr("class","visible");					
    					}
    				});
    			});
    		</script>                 
        
        </head>
        
        <body>
            	
            <div id="box-container">
                <div id="box" class="visible">
                    This is some text<br/> 
                    This is some text<br/>
                    This is some text<br/>
                    This is some text<br/>
                    This is some text<br/>
                    This is some text<br/>
                    This is some text<br/>                                                           
                </div>
            </div>
            
            <a id="hideLink" href="#">Hide Box</a>
        
        </body>
    </html>
    Might not be exactly what you are looking for, but at least it gives you a starting point!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •