[doughavant]

Hi there! I'm pretty new to Javascript and I was wondering if there was a better method to handle the situation. I'm making a website that uses Javascript to hide and show content via DIV boxes.

It's working great but the only issue is that I think there might be a better way to make it more efficient as the more 'pages' / 'DIV boxes' involved, the longer the code. Here's the current code I have:

function myself() {
	if($('#myself').css('display') == 'block') {
		$('#myself').hide();
		$('#banner').fadeIn();
	}
	else if($('#about').css('display') == 'block') {
		$('#about').hide();
		$('#myself').fadeIn();
	}
	else if($('#animation').css('display') == 'block') {
		$('#animation').hide();
		$('#myself').fadeIn();
	}
	else {
		$('#banner').hide();
		$('#myself').fadeIn();
	}
}

function about() {
	if($('#about').css('display') == 'block') {
		$('#about').hide();
		$('#banner').fadeIn();
	}
	else if($('#myself').css('display') == 'block') {
		$('#myself').hide();
		$('#about').fadeIn();
	}
	else if($('#animation').css('display') == 'block') {
		$('#animation').hide();
		$('#about').fadeIn();
	}
	else {
		$('#banner').hide();
		$('#about').fadeIn();
	}
	
}

function animation() {
	if($('#animation').css('display') == 'block') {
		$('#animation').hide();
		$('#banner').fadeIn();
	}
	else if($('#about').css('display') == 'block') {
		$('#about').hide();
		$('#animation').fadeIn();
	}
		else if($('#myself').css('display') == 'block') {
		$('#myself').hide();
		$('#animation').fadeIn();
	}
	else {
		$('#banner').hide();
		$('#animation').fadeIn();
	}