Single HTML Multiple DIVs (pages)

by twong17

HTML

<div id="title">
    SINGLE FILE MULTIPLE PAGES
</div>
<div id="navigation-container">
    <a id="showPage1" class="show-page-link">page 1</a>
    <a id="showPage2" class="show-page-link">page 2</a>
    <a id="showPage3" class="show-page-link">page 3</a>
    <a id="showPage4" class="show-page-link">page 4</a>
</div>
<div id="page1" class="page">
    <head>
    <title> title placeholder </title>
  </head>
  <body>
    <h1>Incident Report Form</h1>
    <hr>
    <h2>
    Client Information:
    </h2>
    Last Name: <br>
    <input type = "text" name = "lname">
    <br><br>
    First Name: <br>
    <input type = "text" name = "fname">
    <br><br>
    Job Position: <br>
    <input type = "text" name = "job">
    <br><br>
    Email Address: <br>
    <input type = "text" name = "email">
    <br><br>
    IP Address: <br>
    <input type = "text" name = "IPAddress">
    <hr>
  
    <h2>
      Incident
    </h2>
    Incident Number: <br>
    <input type = "text" name = "incidentNum">
    <br>
    <br>
    Incident State: <br>
     <select>
      <option value="">-Select-</option>
      <option value="incidentState">Open</option>
      <option value="incidentState">Closed</option>
      <option value="incidentState">Stalled</option>
    </select>
    <br> <br>
    Type of incident: <br> 
    <select>
      <option value="">-Select-</option>
      <option value="incidentType">Email Based Abuse</option>
      <option value="incidentType">Copyright Infringement Reports</option>
    </select>
    
  <br>  <br>
    Comment: <br>
      <textarea rows="7" cols="44">Explanation.</textarea>
  </body>
</div>
<div id="page2" class="page">
    ! WE ARE ON PAGE 2 !
</div>
<div id="page3" class="page">
    ! WE ARE ON PAGE 3 !
</div>
<div id="page4" class="page">
    ! WE ARE ON PAGE 4 !
</div>

CSS

html {
    font-size: 11px;
    font-family: Helvetica, Arial, Sans-Serif;
    color: #333;
}
body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}
a {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 110px;
    border: 1px solid #efefef;
    background-color: #666;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}
a:hover, a.hover { 
    background-color: #0080FF;
}

a.current {
    background-color: #0080FF;
}

#title {
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    padding: 0;
    color: #6E6E6E;
    background-color: #0B3861;
}
#navigation-container {
    text-align: center;
    background-color: #ccc;
    padding: 2px;    
}
div.page {
    border: 0 none;
    height: 200px;
    line-height: 20px;
    text-align: center;
    font-size: 10px;    
    font-weight: 700;    
    color: #000000;
}

a.show-page-link {
    
}

JavaScript

$(document).ready(function() {
    $("#showPage1").on("click", function() {
        show("#page1", "#showPage1");
    });
    $("#showPage2").on("click", function() {
        show("#page2", "#showPage2");
    });
    $("#showPage3").on("click", function() {
        show("#page3", "#showPage3");
    });
    $("#showPage4").on("click", function() {
        show("#page4", "#showPage4");
    });
    show("#page1", "#showPage1", true);
});

function show(pageId, linkId, force) {
    var currVal = $(pageId).css("display");    
    if( force || currVal === "none" ) {
        $(".page").css("display", "none");
        $(pageId).css("display", "block");
        $(".show-page-link").removeClass("current");
        $(linkId).addClass("current");
    }
}