JQuery Slide up and down

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.

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.

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.

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.

by XDirect12345 March 21st 2012, 7:32 pm

thanks for the help kirk! This can be locked now.

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

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.

JQuery Slide up and down

JQuery Slide up and down

Re: JQuery Slide up and down

Re: JQuery Slide up and down

Re: JQuery Slide up and down

Re: JQuery Slide up and down

Re: JQuery Slide up and down

Re: JQuery Slide up and down