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
    Apr 2010
    Posts
    72
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Exclamation Simple jquery Show/Hide Panel wont work

    Hello there..

    I am trying to make a simple jquery Show/Hide Panel, but it doesn't seem to work..

    Here is my code so far:
    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>Velkommen</title>
     
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
      });
    });
    </script>
    
    <style type="text/css"> 
    
      /*this is what we want the div to look like*/
      div.topleft{
        display:block;
    
        /*set the div in the top left corner*/
        position:absolute;
        top:0;
        left:0;
        width:810px;
        
        /*give it some background and border*/
        background:#fff;
        border:0px;
    }
    
    div.panel,p.flip{
    margin:0px;
    padding:5px;
    width:400px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    div.panel{
    height:120px;
    width:400px;
    display:none;
    }
    </style>
    </head>
     
    <body>
    
    <div class="topleft">
    <p class="flip">Show/Hide Panel</p>
    
    <div class="panel">
    <p>Because time is valuable, we deliver quick and easy learning.</p>
    <p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
    </div>
    </div>
     
    </body>
    </html>
    On ftp: http://facesitemedia.dk/test.html

    The tutorial i used:
    http://www.w3schools.com/jquery/tryi...y_slide_toggle

    Do i need to upload some sort of jquery library on the ftp server?

  • #2
    New Coder
    Join Date
    Mar 2006
    Location
    Chennai India
    Posts
    34
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Samz3n View Post
    <script type="text/javascript" src="jquery.js"></script>
    or you can use

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    Chris, Developer, Chrisranjana.com
    Php Developers


  •  

    Posting Permissions

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