The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

JQuery Slide up and down

View previous topic View next topic Go down

Solved JQuery Slide up and down

Post by XDirect12345 on Tue Mar 20, 2012 10: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.

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: JQuery Slide up and down

Post by kirk on Wed Mar 21, 2012 12: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.


kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: JQuery Slide up and down

Post by LGforum on Wed Mar 21, 2012 12: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.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: JQuery Slide up and down

Post by XDirect12345 on Wed Mar 21, 2012 5: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.

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: JQuery Slide up and down

Post by XDirect12345 on Wed Mar 21, 2012 6:32 pm

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

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: JQuery Slide up and down

Post by LGforum on Wed Mar 21, 2012 10: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

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: JQuery Slide up and down

Post by Jophy on Wed Mar 21, 2012 11:01 pm

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

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum