JQuery Slide up and down Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    JQuery Slide up and down

    XDirect12345
    XDirect12345
    XDirect12345
    Forumember


    Male Posts : 361
    Reputation : 3
    Language : English
    • Post n°1

    Solved JQuery Slide up and down

    Post by XDirect12345 March 20th 2012, 11:00 pm

    How do I create a slide down and up effect with jquery? Where do I put the text and titles?

    Something like this http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

    look at the result. I tried the code, it didnt seem to work when I putted it in my overall_header template. Help please.
    • Back to top
    kirk
    kirk
    kirk
    Forumaster


    Male Posts : 11037
    Reputation : 653
    Language : English,Vulcan,Klingon, Romulan,& Gorn
    • Post n°2

    Solved Re: JQuery Slide up and down

    Post by kirk March 21st 2012, 1:27 am

    well you would put the title and text in the areas where i have it in red.

    <html>
    <head>

    <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">
    div.panel,p.flip
    {
    margin:0px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    div.panel
    {
    height:120px;
    display:none;
    }
    </style>
    </head>

    <body>

    <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>

    <p class="flip">Show/Hide Panel</p>

    </body>
    </html>
    that is not working for me either.
    However i did create a fast one in dreamweaver it's a little different then that one, but generally the same idea.

    http://www.forbiddentempleofart.org/h5-colaps-test

    I am sure you can find many other codes out there as well.

    • Back to top
    LGforum
    LGforum
    LGforum
    Hyperactive


    Male Posts : 2265
    Reputation : 264
    Language : English
    Location : UK
    • Post n°3

    Solved Re: JQuery Slide up and down

    Post by LGforum March 21st 2012, 1:39 pm

    All you really need Is this:
    Code:

    <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>

    <p class="flip" onclick="jQuery(this.previousSibling).slideToggle()">Show/Hide Panel</p>

    If you use phpbb3 you'll need to change the class name of the first element since it will clash.

    You should know that w3schools provides educational examples not copy and paste code. The fact you copied all of it would say you need to do a bit of research into HTML first.
    • Back to top
    XDirect12345
    XDirect12345
    XDirect12345
    Forumember


    Male Posts : 361
    Reputation : 3
    Language : English
    • Post n°4

    Solved Re: JQuery Slide up and down

    Post by XDirect12345 March 21st 2012, 6:25 pm

    I know html, css, and javascript. Besides I get most of my code from them and it works, so site coding is different like "Wikia" and this site for example. I'll test it out and let you know.
    • Back to top
    XDirect12345
    XDirect12345
    XDirect12345
    Forumember


    Male Posts : 361
    Reputation : 3
    Language : English
    • Post n°5

    Solved Re: JQuery Slide up and down

    Post by XDirect12345 March 21st 2012, 7:32 pm

    thanks for the help kirk! This can be locked now.
    • Back to top
    LGforum
    LGforum
    LGforum
    Hyperactive


    Male Posts : 2265
    Reputation : 264
    Language : English
    Location : UK
    • Post n°6

    Solved Re: JQuery Slide up and down

    Post by LGforum March 21st 2012, 11:30 pm

    If you've used the code above, and you are a windows seven user, no doubt you'll see a 'This application has high memory usage' very soon, and you'll notice your site slowing down. Rolling Eyes
    • Back to top
    Jophy
    Jophy
    Jophy
    ForumGuru


    Male Posts : 17922
    Reputation : 836
    Language : English
    Location : Somewhere
    • Post n°7

    Solved Re: JQuery Slide up and down

    Post by Jophy March 22nd 2012, 12:01 am

    XDirect12345 wrote:I know html, css, and javascript. Besides I get most of my code from them and it works, so site coding is different like "Wikia" and this site for example. I'll test it out and let you know.

    XDirect12345 wrote:thanks for the help kirk! This can be locked now.
    Please don't double/triple post.

    Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the EDIT button instead. Since this is your 3rd reminder about this, you earned yourself a warning.


    Topic Solved & Moved

    Note: You can also help the staff member's work by EDITING your topic and marking it as solved.
    • Back to top