Showing a div in page only when clicked

JavaScript
1

hey folks,
new to JS, but i have a call of nature. my current requirement is there are two tabs they are like


<ul>
<li>Personal Info</li>
<li>History<li>
</ul>

now, what i want is that when a person come on a page ofcourse its a personal info page but when he click history. the page stays the page but another div loads. like switching pages. only in this one div is hiding and other will show. can anyone help me write a little code to help me.
thanks in advance

2

You can include script ajax.js into head and than you can use function javascript getdata() wherever you want in document, all you need is to have named <div> areas, for example like this:

<a href=”#” onclick=”getdata(‘page_to_load‘,’where_to_put_it‘);”>Click here</a>

3

That might be helpful if you said what ajax.js contains or linked where to find it. :wink:

4

Here’s a simple example page where all the data is loaded in one go (i.e. NOT the AJAX method). :slight_smile:

<html>
<head>
<title>JS Div Show/Hide</title>
<script type="text/javascript">
function hide (div) {
	div.style.visibility = "hidden";
}
function show (div) {
	div.style.visibility = "visible";
}
function showme (div) {
// Hide all DIVs, then show just the one required
	var divs = document.getElementsByTagName ('div');
	for (var i=0;i<divs.length;++i) {
		if (divs[i].id) { // The DIV has an id="" attribute
			var el = document.getElementById (divs[i].id)
			hide (el);
		}
	}
	var el = document.getElementById (div);
	show (el);
	return false;
}
window.onload = function () {
// On display load, hide all DIVs then just show Personal
	var divs = document.getElementsByTagName ('div');
	for (var i=0;i<divs.length;++i) {
		if (divs[i].id) { // The DIV has an id="" attribute
			var el = document.getElementById (divs[i].id)
			hide (el);
		}
	}
	var el = document.getElementById ('Personal');
	show (el);
}
</script>
</head>
<body>
<div id="Personal"><p>Some Personal text goes here</p><p><a href="#" onclick="showme ('History')">Show History</a></p></div>
<div id="History"><p>Some History other text goes here</p><p><a href="#" onclick="showme ('Personal')">Show Personal</a></p></div>
</body>
</html>
5

a simple example in JS will help

6

You’ll need to use AJAX to get the content from the external page or show/hide a div that is already on the page and has info in it. I would prefer the AJAX route. Look into jQuery, you can have this up and running in no time.

Jquery: You can user $.get, a much simpler option is this $(“#myDiv”).load(“somepage.htm”)

Check out the following 2 threads, these have example code and help links to utilize and learn jQuery: