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>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    .hidden {
      display: none;
    }
    .visible {
      background-color: yellow;
    }
  </style>
</head>
<body>
<div id="wrapper">
<div id="leftpanel">
    <div id="navcontainer">
        <ul id="navlist">
            <li><a href="javascript:;" onClick="handleElements('Modules','rightpanel')">Modules</a></li>
            <li><a href="javascript:;" onClick="handleElements('DataViewer','rightpanel')">Data Viewer</a><li>
            <li><a href="javascript:;" onClick="handleElements('Alarms','rightpanel')">Alarms</a><li>
            <li><a href="javascript:;" onClick="handleElements('Logging','rightpanel')">Logging</a><li>
            <li><a href="javascript:;" onClick="handleElements('Outputs','rightpanel')">Output Control</a><li>
        </ul>
    </div>
</div>
​
<div id="rightpanel">
    <div id="Modules" class="visible">
        <h2>Module Information Here</h2>
    </div>
    <div id="DataViewer" class="hidden">
        <h2>Data Viewer Here</h2>
    </div>
    <div id="Alarms" class="hidden">
        <h2>Alarm Page Here</h2>
    </div>
    <div id="Logging" class="hidden">
        <h2>Logging Setup Here</h2>
    </div>
    <div id="Outputs" class="hidden">
        <h2>Output Control Here</h2>
    </div>
</div>
  </div>
  <script>
function handleElements(elementid,containerid) {
// Get array of all 'visible' elements in the container
var elements = document.getElementById(containerid).getElementsByClassName('visible');
​
// Iterate over that array and make them all 'hidden'
for (var i in elements) {
    elements[i].className='hidden';
}
​
// Get the 'clicked' tab and set it to 'visible'
var clicked = document.getElementById(elementid);
clicked.className='visible';
}
  </script>
</body>
</html>
 
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers