Just recently I have had to finally bite the bullet and learn some proper Javascript. Not just making text in input boxes disappear when the user clicks on them, I’m talking PROPER stuff like making boxes appear and disappear inside already existing content.
This tutorial is written for JQuery but do not think that I would recommend JQuery over other frameworks such as MooTools. I personally like using JQuery as the CSS style traversing of the DOM is more intuitive to me, however I would recommend that you take a look and try all you can, you may prefer the style used by the other frameworks. To me MooTools came across as horribly complicated hence this tutorial is for JQuery.
What does this tutorial do?
It shows you how to make a preloaded content box appear and disappear when the user clicks a “View More” link. If you want a better idea check the demo page I have created to go with this. It has the code included but I will also post it here. First off don’t forget to include the JQuery library, which you can download from the JQuery site.
THE HTML CODING
<html>
<head>
<title>Simple JQuery Expanding Content</title>
<style type="text/css">
.outer-box {
width: 100%;
height: auto;
float: left;
}
.inner1 {
width: 98%;
border: 1px solid #ff0000;
}
.inner2 {
width: 98%;
border: 1px solid #ffff00;
}
</style>
<script type="text/javascript" src="link/to/jquery/library"></script>
</head>
<body>
<div>
<div>
<p>some content</p>
</div>
<div>
<p>Some extra content</p>
</div>
<div>
<p><a href="" title="View More">View More</a></p>
</div>
</div>
</body>
</html>
THE FINISHED CODE
$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
$(this).text("View Less");
$(this).attr("title", "View Less");
},function(){
$(this).parents("div").prev(".inner2").hide();
$(this).text("View More");
$(this).attr("title", "View More");
});
Now if you’ve not done any Javascript before this probably looks like it did to me a pile of strangeness! Honestly though it is simple enough to understand.
If you’re just reading this for the code and don’t want to understand then just copy and paste it and run away. That’s it go on you free loader! Ctrl+C, Ctrl+V and runnnnnnnnnn! Don’t leave a comment or anything nooooo just run away!
Sorry…
Ok, now to explain the code…if there’s anyone left.
First thing to explain is the very first line.
$(function(){
});
This is the same as typing
$(document).ready(function(){
//some javascript stuff here
});
If you don’t know the basics of JQuery this line ensures that the document is ready to be altered by your Javascript. There are reasons for this but I won’t be explaining them here. If you want to know why check the JQuery site, in particular the getting started tutorials.
As you can see by comparing the HTML and Javascript you should be able to spot that there is one containing box (class outer-box) are two boxes inside that container (classes inner1 and inner2), there is also one final div which contains the “View More” link. Your HTML does not need to resemble this but you will need to change any references to my classes and you may also have to alter some of the JQuery itself to make sure you are selecting the right divs.
After checking the document is ready to be used we hide the div containing the extra information which we want to show/hide.
$(".inner2").hide();
English translation:- Find something in the document with the class of inner2 and use the hide function with no parameters. This will remove it from view.
Once that is done I set up the event which fires off the code to show or hide the information.
$(".vm").toggle(function(){
},function(){
});
Right that looks a little more complicated than the last bit, lets check the English translation:-
If the user clicks anything with a class of vm (in this case our View More link) toggle between the next two functions. Now that sounds more reasonable doesn’t it? So I click it once it fires the first function, I click it again it fires the second. Easy!
OK Now I have two toggle states set up which will fire one after the other given clicks of the View More link. But what do I want it to do? Well if the information is visible I need to hide it and if it’s hidden I need to show it. As I know I have already hidden the content this makes things alot easier.
Our toggle code now becomes:-
$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
},function(){
});
English translation:- From the element which has fired this code, go up to it’s parent element and find anything with the class inner2 which is previous to where we are and apply the show function using the inbuilt parameter slow. This of course shows the element we wish to show. To hide it again we simple do the opposite.
$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
},function(){
$(this).parents("div").prev(".inner2").hide();
});
The observant amongst you will have noticed there is no nice styling to the hide. This is a usability concession, why would the user want it to gracefully disappear off of the screen, they clicked to get rid of it, they want it gone and gone yesterday!
The rest of the code is me being my OCD self. I don’t like the thought of someone clicking a link that says “View More” seeing the more pop out infront of them but still having the link say “View More” it should be “View Less” or words to that effect.
$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
$(this).text("View Less");
},function(){
$(this).parents("div").prev(".inner2").hide();
$(this).text("View More");
});
Also you can’t very well claim to be accesible if you don’t sort out the title for the link as well!
$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
$(this).text("View Less");
$(this).attr("title", "View Less");
},function(){
$(this).parents("div").prev(".inner2").hide();
$(this).text("View More");
$(this).attr("title", "View More");
});
The attr notation allows you to change almost any attribute of an HTML element.
Suprisingly enough that is it! If you load up your page and you can see the content which is supposed to be hidden there is something wrong with your code. Go back and make sure have all the brackets in the right place and all the semi-colons.
As written this code will also work for multiple elements such as a list of portfolio sites. As long as the class names stay the same it will work just fine.
I hope this is helpful to anyone, while I was researching how to do this there was no one tutorial which showed you this in it’s entirety…but now there is!!
You might also like
 |
 |
 |
 |
