09.29
Today,
I’ll just add a note to my previous post that showed you how to slide a div with a bit of Javascript.
Maybe some of you rather use a simpler way to do this and since my previous article got quite a lot of visits I decided to show you how !
This article is based on jQuery, a very popular javascript framework that allows you to use very nice Effects and built in Ajax functions.
If you want to check out some live examples of what jQuery is capable of go check out this link
OK first of you need to download jQuery, It can be found on jQuery’s website. Here is a direct link to the JS but remeber to check out the main website to make sure that a new version is not available.
Once you have downloaded this file you have to put it somewhere in your website folder.
Most developers would put it in a lib directory (because jQuery is a library) but It doesnt matter at all so just put it where you feel like !
Of now you need to add a link to that file in the head of you website page between the
of your pages.<head> some stuff... <script type="text/javascript" src="lib/jquery.js"></script> some stuff.. </head>
If you manage to do that you’ve finished the hard part ! Congrats !
now If you want to Slide in or Out a Div you just have to add this anywhere in you html.
<script>
$(document).ready(function(){
$("#idOfYourlink").click({function(){
$("#idOfYourDiv").slideToggle("slow");
});
});
</script>
In the above code you can see that we need some kind of button to trigger the slide.
This can be a button or a link , another div et cetera the only important thing is that it has an ID.
here is a full source code of a working html page.
<html>
<head>
<script type="text/javascript" src="lib/jquery.js"></script>
</head>
<body>
<a id="toogle" style="cursor:pointer">Hide/show</a>
<div id="myDivIWantToSlide">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nulla at justo aliquam tincidunt et vel odio. Donec non nisi at neque consequat congue at id nisl. Fusce sit amet ullamcorper velit. Maecenas semper tincidunt ante vulputate pretium. Cras et neque orci, vitae consequat dui. Curabitur tortor nibh, gravida nec luctus ut, tristique eu augue. Praesent est mi, mollis ut porttitor et, tempor vel mauris. Sed gravida, velit in gravida vehicula, arcu arcu mattis augue, ornare lacinia dui sem vitae nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a magna purus, non mollis risus. Nunc tincidunt orci ut odio pretium quis hendrerit neque vulputate. Nullam rhoncus nisi sed risus luctus ut fermentum tellus ullamcorper. Duis viverra, nibh ac placerat vehicula, ante nibh sagittis sapien, suscipit tempor nisi lectus vitae nunc. Fusce hendrerit elementum viverra. Suspendisse potenti. Quisque ornare feugiat odio, id imperdiet eros adipiscing et. Pellentesque placerat, orci at pellentesque lacinia, risus sapien pulvinar arcu, at suscipit orci purus eu justo. Etiam id mauris urna. Morbi quam nisi, rhoncus vitae consequat id, fermentum a libero. Nulla luctus eleifend justo ut aliquam.
</div>
<script>
$(document).ready(function(){
$("#toogle").click(function(){
$("#myDivIWantToSlide").slideToggle("slow");
});
});
</script>
</body>
</html>
If you want to check it out go see the demo
Thank you for the great div slide with detailed documentation.
Could you show how this can be used in a closed state when loaded?
Thank you
To answer my own question, I set the Display to “none” for the div that I did not want to show.
Thank you again for the great tutorial.
I have the same issue, but how/where does one set the “display”?
Got it.