Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
​
</script>
  <style type="text/css">
  #content1, #content2, #content3, #content4 {
  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=" ">
 <div id="content1">Container #1<p>Whole bunch of text 1</div>
 <div id="content2">Container #2<p>Whole bunch of text 2</div>
 <div id="content3">Container #3<p>Whole bunch of text 3</div>
 <div id="content4">Container #4<p>Whole bunch of text 4</div>
</div>
​
</body>
</html>
 
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('content'+idInfo).style.display = 'block';
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers