"jQuery for Absolute Beginners” Video Series complete, what next?

[Martin_Man]

I have completed and mastered http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/. Are there any advanced stages I can move onto now with videos like these as they are so easy to follow and understand.

 

[Martin_Man]

It sounds like you need a project to practise on

Explain?

 

[Martin_Man]

E.g. get your teeth into a project. A lot of people learn a lot by actually using it to solve a practical problem.

Ohhh i see.
I was actually thinking about doing that but i thought i would like to learn a little more first.

Do you have any work? I'd love to see.

 

[Martin_Man]

Thats pretty cool. I shall give it ago and post on here soon

 

[Martin_Man]

Ok this is how new i am. Its not perfect which i am aware of so please don't be to harsh. Click on the link below for a tester.

http://www.every-occasional-videos.co.uk/jquery

How do i change this so that when you click a second link it removes the first content?

Here is my code

$(function() {
		   $('a#home').click(function() {
									  $('#box').fadeIn(4000);
									  });
		   
		   		   $('a#news').click(function() {
									  $('#box2').fadeIn(4000);
									  });
				   
				   		   $('a#about').click(function() {
									  $('#box3').fadeIn(4000);
									  });
						   				   		   
												   $('a#link').click(function() {
									  $('#box4').fadeIn(4000);
									  });	
												   
		   });

 

[Martin_Man]

You can fix it using a custom function:

<script type="text/javascript">
	
	$(function() {
		$('a#home').click(function() {
			showContent('#box');
		});
		   
		$('a#news').click(function() {
			showContent('#box2');
		});
				   
		$('a#about').click(function() {
			showContent('#box3');
		});
						   				   		   
		$('a#link').click(function() {
			showContent('#box4');
		});
	});
	
	function showContent(box) {
		// Hide all of the boxes
		$('.content').hide();
		// Fade in the specified box
		$(box).fadeIn(4000);
	}
	
</script>

You will need to add a class to all of the divs in the body so they can be hidden with a single selector:

<div id="box" class="content">
<div id="box2" class="content">
<div id="box3" class="content">
<div id="box4" class="content">

Thanks mate! because of the 'showContent('#box4');' is this what removes the content when you click onto another link?

Its for beginners of Jquery only. Would you like to have the link?