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 xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
    <style type="text/css">
        .ContentDivs
        {
            width: 90%;
            height: 300px;
            border: solid 5px #404040;
            display:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <a id="Link1" href="#">Link1</a> <a id="Link2" href="#">Link2</a> <a id="Link3" href="#">Link3</a> <a id="Link4" href="#">Link4</a>
        </div>
        <div id="div1" class="ContentDivs">
        DIv1
        </div>
        <div id="div2" class="ContentDivs">
        Div2
        </div>
        <div id="div3" class="ContentDivs">
        Div3
        </div>
        <div id="div4" class="ContentDivs">
        Div4
        </div>
    </div>
    <script type="text/javascript">
        
        $('#Link1').click(function() {
        $(".ContentDivs").fadeOut("slow");
            $("#div1").fadeIn("slow");
        });
        $('#Link2').click(function() {
        $(".ContentDivs").fadeOut("slow");
            $("#div2").fadeIn("slow");
        });
        $('#Link3').click(function() {
        $(".ContentDivs").fadeOut("slow");
            $("#div3").fadeIn("slow");
        });
        $('#Link4').click(function() {
        $(".ContentDivs").fadeOut("slow");
            $("#div4").fadeIn("slow");
        });
    </script>
    </form>
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers