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>Testing DOM loading and script placement</title>
    <style type="text/css">
        /* Start Hidden, show first */
        #resistorContent > section[id] {
            width: 940px;
            height: 400px;
            overflow: hidden;
            display:none;
        }
        #resistorContent > section[id]:first-child {
            display: block;
        }
    </style>
</head>
<body>
    <div id="resistorContent">
        <section id="resistorDetail1"><img src="//placehold.it/940x450/5B696A/fff/&text=PIC+1" alt=""></section>
        <section id="resistorDetail2"><img src="//placehold.it/940x450/4D686B/fff/&text=PIC+2" alt=""></section>
        <section id="resistorDetail3"><img src="//placehold.it/940x450/415558/fff/&text=PIC+3" alt=""></section>
        <section id="resistorDetail4"><img src="//placehold.it/940x450/345658/fff/&text=PIC+4" alt=""></section>
            <ul>
                <li onmouseover="showDetailContent('resistorDetail1')">Hover 1!</li>
                <li onmouseover="showDetailContent('resistorDetail2')">Hover 2!</li>
                <li onmouseover="showDetailContent('resistorDetail3')">Hover 3!</li>
                <li onmouseover="showDetailContent('resistorDetail4')">Hover 4!</li>
            </ul>
        </section>
    </div>
    <script>
        var children = document.querySelectorAll('#resistorContent > section[id]');
        function showDetailContent(target) {
            // Simply loop over our children and ensure they are hidden:
            for (var i = 0, child; child = children[i]; i++) {
                child.style.display = 'none';
            }
            // Now, show our child we want to show
            document.getElementById(target).style.display = 'block';
        }
    </script>
</body>
</html>
 
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers