I've been searching around the Internet looking for a solution, and haven't been able to find one that works.
Here is what I am dealing with... I have 4 text links, that when I click on each link, I want the unhidden div container to load. Although my syntax is incorrect, it's basically:
//The container I want all content divs to load into... and by default, to show the first container content
<div id="container"></div>
//The 4 container content divs.
<div id="container1">Whole bunch of text 1</div>
<div id="container2">Whole bunch of text 2</div>
<div id="container3">Whole bunch of text 3</div>
<div id="container4">Whole bunch of text 4</div>
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3, #container4 {
display:none;
border:3px solid blue;
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="linkDiv">
<a href="#" onclick="showDiv('');return false">Home</a>
<a href="#" onclick="showDiv('1');return false">link 1</a>
<a href="#" onclick="showDiv('2');return false">link 2</a>
<a href="#" onclick="showDiv('3');return false">link 3</a>
<a href="#" onclick="showDiv('4');return false">link 4</a>
</div>
<p>
<div id="container">
The container I want all content divs to load into... and by default, to show the first container content
</div>
<!-- The 4 container content divs. -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
<div id="container4">Container #4<p>Whole bunch of text 4</div>
</div>
</body>
</html>
BTW: You should enclose your code between [ code] and [ /code] tags (without the spaces)
to make it easier for forum members to read, copy, test and/or debug.
JMRKER, you are a real blessing! Thank you so much... after 6 hours of troubleshooting, you totally solved my problem. Now I have to stylize... I wish I was better at coding...
Should not be used unless you also include a JQuery library reference.
Also, the code is not needed unless the user wants to display the first <div> tag after the main <div> content when the page is called the 1st time.
There are other ways to accomplish this without the library [onload() comes to mind].
And the description of the OP in the first post did not want that, if I understood his request.
Switch Div Content Using Javascript
Reply With Quote
Originally Posted by maggiemkfung
Bookmarks