Ready to Launch

index.html

<div id = "container">
  <div class = "header">
    <h1>Ready to Launch</h1>
    <div>A checklist of launching your next website</div>
  </div>
  <form>
    <div class = "pad-header"></div>
    <div class = "pad">
      <div class = "page">
        <fieldset class = "list">
          <ul class = "pad-container">
            <li>
              <h2 class = "top"><span class = "exp-complete complete"></span><a href="#" class="toggle_exp"><span class = "exp-icon"></span>Experience Related</a></h2>
              <ul class = "exp">
                <li>
                  <input id="exp1" name="exp1" type="checkbox" />
                  <label for = "exp1">Images have appropriate alt text</label>
                  <span class = "exp1-na">N/A</span>
                  <div class = "exp1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="exp1-comment-textbox" maxlength="250"></textarea>
					<span class="exp1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="exp2" name="exp2" type="checkbox" />
                  <label for = "exp2">No Instances of "click here" for links</label>
                  <span class = "exp2-na">N/A</span>
                  <div class = "exp2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="exp2-comment-textbox" maxlength="250"></textarea>
					<span class="exp2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="exp3" name="exp3" type="checkbox" />
                  <label for = "exp3">All delete actions require confirmation</label>
                  <span class = "exp3-na">N/A</span>
                  <div class = "exp3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="exp3-comment-textbox" maxlength="250"></textarea>
					<span class="exp3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="exp4" name="exp4" type="checkbox" />
                  <label for = "exp4">Touch targets are a minimum of 45 pixels wide</label>
                  <span class = "exp4-na">N/A</span>
                  <div class = "exp4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="exp4-comment-textbox" maxlength="250"></textarea>
					<span class="exp4-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "content-complete complete"></span><a href="#" class="toggle_content"><span class = "content-icon"></span>Content</a></h2>
              <ul class = "content">
                <li>
                  <input id="content1" name="content1" type="checkbox" />
                  <label for = "content1">Site content has been proofread for typos</label>
                  <span class = "content1-na">N/A</span>
                  <div class = "content1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="comment1-comment-textbox" maxlength="250"></textarea>
					<span class="comment1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="content2" name="content2" type="checkbox" />
                  <label for = "content2">There is no test copy remaining on the site</label>
                  <span class = "content2-na">N/A</span>
                  <div class = "content2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="content2-comment-textbox" maxlength="250"></textarea>
					<span class="content2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="content3" name="content3" type="checkbox" />
                  <label for = "content3">Phone numbers & addresses have been verified</label>
                  <span class = "content3-na">N/A</span>
                  <div class = "content3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="content3-comment-textbox" maxlength="250"></textarea>
					<span class="content3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "brand-complete complete"></span><a href="#" class="toggle_brand"><span class = "brand-icon"></span>Branding</a></h2>
              <ul class = "brand">
                <li>
                  <input id="brand1" name="brand1" type="checkbox" />
                  <label for = "brand1">The site has a working favicon</label>
                  <span class = "brand1-na">N/A</span>
                  <div class = "brand1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="brand1-comment-textbox" maxlength="250"></textarea>
					<span class="brand1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="brand2" name="brand2" type="checkbox" />
                  <label for = "brand2">The footer section has legal info</label>
                  <span class = "brand2-na">N/A</span>
                  <div class = "brand2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="brand2-comment-textbox" maxlength="250"></textarea>
					<span class="brand2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="brand3" name="brand3" type="checkbox" />
                  <label for = "brand3">Title includes domain at the end (e.g. - domain.com)</label>
                  <span class = "brand3-na">N/A</span>
                  <div class = "brand3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="rand3-comment-textbox" maxlength="250"></textarea>
					<span class="brand3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "seo-complete complete"></span><a href="#" class="toggle_seo"><span class = "seo-icon"></span>SEO</a></h2>
              <ul class ="seo">
                <li>
                  <input id="seo1" name="seo1" type="checkbox" />
                  <label for = "seo1">Setup on traffic analysis package</label>
                  <span class = "seo1-na">N/A</span>
                  <div class = "seo1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="seo1-comment-textbox" maxlength="250"></textarea>
					<span class="seo1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="seo2" name="seo2" type="checkbox" />
                  <label for = "seo2">Up-to-date sitemap submitted to Google</label>
                  <span class = "seo2-na">N/A</span>
                  <div class = "seo2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="seo2-comment-textbox" maxlength="250"></textarea>
					<span class="seo2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="seo3" name="seo3" type="checkbox" />
                  <label for = "seo3">H1 & Meta title attributes are descriptive and SEO friendly</label>
                  <span class = "seo3-na">N/A</span>
                  <div class = "seo3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="seo3-comment-textbox" maxlength="250"></textarea>
					<span class="seo3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="seo4" name="seo4" type="checkbox" />
                  <label for = "seo4">Meta descriptions attributes are SEO friendly</label>
                  <span class = "seo4-na">N/A</span>
                  <div class = "seo4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="seo4-comment-textbox" maxlength="250"></textarea>
					<span class="seo4-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "val-complete complete"></span><a href="#" class="toggle_val"><span class = "val-icon"></span>Validation</a></h2>
              <ul class = "val">
                <li>
                  <input id="val1" name="val1" type="checkbox" />
                  <label for = "val1">W3C Markup validated</label>
                  <span class = "val1-na">N/A</span>
                  <div class = "val1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="val1-comment-textbox" maxlength="250"></textarea>
					<span class="val1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="val2" name="val2" type="checkbox" />
                  <label for = "val2">CSS files linted</label>
                  <span class = "val2-na">N/A</span>
                  <div class = "val2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
                  </div>
                </li>
                <li>
                  <input id="val3" name="val3" type="checkbox" />
                  <label for = "val3">No broken links found</label>
                  <span class = "val3-na">N/A</span>
                  <div class = "val3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
                  </div>
                </li>
                <li>
                  <input id="val4" name="val4" type="checkbox" />
                  <label for = "val4">JavaScript is error-free</label>
                  <span class = "val4-na">N/A</span>
                  <div class = "val4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
                  </div>
                </li>
              </ul>
              <h2><span class = "testing-complete complete"></span><a href="#" class="toggle_testing"><span class = "testing-icon"></span>Cross Browser Testing</a></h2>
              <ul class = "testing">
                <li>
                  <input id="testing1" name="testing1" type="checkbox" />
                  <label for = "testing1">Chrome (on Windows & OS X)</label>
                  <span class = "testing1-na">N/A</span>
                  <div class = "testing1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="testing1-comment-textbox" maxlength="250"></textarea>
					<span class="testing1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="testing2" name="testing2" type="checkbox" />
                  <label for = "testing2">Firefox (on Windows & OS X)</label>
                  <span class = "testing2-na">N/A</span>
                  <div class = "testing2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="testing2-comment-textbox" maxlength="250"></textarea>
					<span class="testing2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="testing3" name="testing3" type="checkbox" />
                  <label for = "testing3">Safari (on OS X)</label>
                  <span class = "testing3-na">N/A</span>
                  <div class = "testing3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="testing3-comment-textbox" maxlength="250"></textarea>
					<span class="testing3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="testing4" name="testing4" type="checkbox" />
                  <label for = "testing4">Internet Explorer 9</label>
                  <span class = "testing4-na">N/A</span>
                  <div class = "testing4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="testing4-comment-textbox" maxlength="250"></textarea>
					<span class="testing4-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="testing5" name="testing5" type="checkbox" />
                  <label for = "testing5">Internet Explorer 8</label>
                  <span class = "testing5-na">N/A</span>
                  <div class = "testing5-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="testing5-comment-textbox" maxlength="250"></textarea>
					<span class="testing5-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="testing6" name="testing6" type="checkbox" />
                  <label for = "testing6">Internet Explorer 7</label>
                  <span class = "testing6-na">N/A</span>
                  <div class = "testing6-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="testing6-comment-textbox" maxlength="250"></textarea>
					<span class="testing6-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="testing7" name="testing7" type="checkbox" />
                  <label for = "testing7">Font stack has been tested on Windows & OS X</label>
                  <span class = "testing7-na">N/A</span>
                  <div class = "testing7-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="testing7-comment-textbox" maxlength="250"></textarea>
					<span class="testing7-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "rwd-complete complete"></span><a href="#" class="toggle_rwd"><span class = "rwd-icon"></span>Responsive Design Testing</a></h2>
              <ul class = "rwd">
                <li>
                  <input id="rwd1" name="rwd1" type="checkbox" />
                  <label for = "rwd1">Tested at 1366 x 768</label>
                  <span class = "rwd1-na">N/A</span>
                  <div class = "rwd1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="rwd1-comment-textbox" maxlength="250"></textarea>
					<span class="rwd1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="rwd2" name="rwd2" type="checkbox" />
                  <label for = "rwd2">Tested at 1024 x 768</label>
                  <span class = "rwd2-na">N/A</span>
                  <div class = "rwd2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="rwd2-comment-textbox" maxlength="250"></textarea>
					<span class="rwd2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="rwd3" name="rwd3" type="checkbox" />
                  <label for = "rwd3">Tested at 320 x 480</label>
                  <span class = "rwd3-na">N/A</span>
                  <div class = "rwd3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="rwd3-comment-textbox" maxlength="250"></textarea>
					<span class="rwd3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="rwd4" name="rwd4" type="checkbox" />
                  <label for = "rwd4">Test your design at the most common resolutions</label>
                  <span class = "rwd4-na">N/A</span>
                  <div class = "rwd4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="rwd4-comment-textbox" maxlength="250"></textarea>
					<span class="rwd4-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "perf-complete complete"></span><a href="#" class="toggle_perf"><span class = "perf-icon"></span>Performance</a></h2>
              <ul class = "perf">
                <li>
                  <input id="perf1" name="perf1" type="checkbox" />
                  <label for="perf1">Page load time has been tested</label>
                  <span class = "perf1-na">N/A</span>
                  <div class = "perf1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="perf1-comment-textbox" maxlength="250"></textarea>
					<span class="perf1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="perf2" name="perf2" type="checkbox" />
                  <label for="perf2">Site images are optimize for the web</label>
                  <span class = "perf2-na">N/A</span>
                  <div class = "perf2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="perf2-comment-textbox" maxlength="250"></textarea>
					<span class="perf2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="perf3" name="perf3" type="checkbox" />
                  <label for="perf3">JavaScript, CSS, HTML files are minified</label>
                  <span class = "perf3-na">N/A</span>
                  <div class = "perf3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="perf3-comment-textbox" maxlength="250"></textarea>
					<span class="perf3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "worst-complete complete"></span><a href="#" class="toggle_worst"><span class = "worst-icon"></span>Testing for the worst case scenario</a></h2>
              <ul class = "worst">
                <li>
                  <input id="worst1" name="worst1" type="checkbox" />
                  <label for="worst1">JavaScript turned off</label>
                  <span class = "worst1-na">N/A</span>
                  <div class = "worst1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="worst1-comment-textbox" maxlength="250"></textarea>
					<span class="worst1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="worst2" name="worst2" type="checkbox" />
                  <label for="worst2">Images turned off</label>
                  <span class = "worst2-na">N/A</span>
                  <div class = "worst2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="worst2-comment-textbox" maxlength="250"></textarea>
					<span class="worst2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="worst3" name="worst3" type="checkbox" />
                  <label for="worst3">CSS turned off</label>
                  <span class = "worst3-na">N/A</span>
                  <div class = "worst3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="worst3-comment-textbox" maxlength="250"></textarea>
					<span class="worst3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="worst4" name="worst4" type="checkbox" />
                  <label for="worst4">Flash turned off</label>
                  <span class = "worst4-na">N/A</span>
                  <div class = "worst4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="worst4-comment-textbox" maxlength="250"></textarea>
					<span class="worst4-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="worst5" name="worst5" type="checkbox" />
                  <label for="worst5">QuickTime and other plugins turned off</label>
                  <span class = "worst5-na">N/A</span>
                  <div class = "worst5-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="worst5-comment-textbox" maxlength="250"></textarea>
					<span class="worst5-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="worst6" name="worst6" type="checkbox" />
                  <label for="worst6">Fallback style sheet is setup</label>
                  <span class = "worst6-na">N/A</span>
                  <div class = "worst6-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="worst6-comment-textbox" maxlength="250"></textarea>
					<span class="worst6-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "forms-complete complete"></span><a href="#" class="toggle_forms"><span class = "forms-icon"></span>Forms</a></h2>
              <ul class = "forms">
                <li>
                  <input id="forms1" name="forms1" type="checkbox" />
                  <label for="forms1">Inline help has been added where needed</label>
                  <span class = "forms1-na">N/A</span>
                  <div class = "forms1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="forms1-comment-textbox" maxlength="250"></textarea>
					<span class="forms1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="forms2" name="forms2" type="checkbox" />
                  <label for="forms2">Forms use HTML5 validation to highlight invalid fields</label>
                  <span class = "forms2-na">N/A</span>
                  <div class = "forms2-comment">
                    <span class = "icon-comment"></span>
                    <<div class = "comment-box">
					<label>Comments:</label>
					<textarea class="forms2-comment-textbox" maxlength="250"></textarea>
					<span class="forms2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="forms3" name="forms3" type="checkbox" />
                  <label for="forms3">Forms data is checked via server-side validation</label>
                  <span class = "forms3-na">N/A</span>
                  <div class = "forms3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="forms3-comment-textbox" maxlength="250"></textarea>
					<span class="forms3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="forms4" name="forms4" type="checkbox" />
                  <label for="forms4">All submit functions redirect to a thank you page</label>
                  <span class = "forms4-na">N/A</span>
                  <div class = "forms4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="forms4-comment-textbox" maxlength="250"></textarea>
					<span class="forms4-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "contact-complete complete"></span><a href="#" class="toggle_contact"><span class = "contact-icon"></span>Contact the admins</a></h2>
              <ul class = "contact">
                <li>
                  <input id="contact1" name="contact1" type="checkbox" />
                  <label for="contact1">A test message has been sent and a reply received</label>
                  <span class = "contact1-na">N/A</span>
                  <div class = "contact1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="contact1-comment-textbox" maxlength="250"></textarea>
					<span class="contact1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="contact2" name="contact2" type="checkbox" />
                  <label for="contact2">Setup an email address for <i>abuse@domain.com</i></label>
                  <span class = "contact2-na">N/A</span>
                  <div class = "contact2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="contact2-comment-textbox" maxlength="250"></textarea>
					<span class="contact2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "error-complete complete"></span><a href="#" class="toggle_error"><span class = "error-icon"></span>Error Messages</a></h2>
              <ul class = "error">
                <li>
                  <input id="error1" name="error1" type="checkbox" />
                  <label for = "error1">Error pages are setup that are both helpful and branded</label>
                  <span class = "error1-na">N/A</span>
                  <div class = "error1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="error1-comment-textbox" maxlength="250"></textarea>
					<span class="error1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
			 <li>
			   <input id="error2" name="error2" type="checkbox" />
			   <label for = "error2">Include pages: 402, 404, 500</label>
			   <span class = "error2-na">N/A</span>
			   <div class = "error2-comment">
			     <span class = "icon-comment"></span>
			     <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="error2-comment-textbox" maxlength="250"></textarea>
					<span class="error2-comment-characterLeft">250 Characters Max</span>
				</div>
			   </div>
			 </li>
                <li>
                  <input id="error3" name="error5" type="checkbox" />
                  <label for = "error3">Server-side code serves branded error pages</label>
                  <span class = "error3-na">N/A</span>
                  <div class = "error3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="error3-comment-textbox" maxlength="250"></textarea>
					<span class="error3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
              <h2><span class = "prod-complete complete"></span><a href="#" class="toggle_prod"><span class = "prod-icon"></span>Production Ready</a></h2>
              <ul class = "prod">
                <li>
                  <input id="prod1" name="prod1" type="checkbox" />
                  <label for = "prod1">The site is backed up</label>
                  <span class = "prod1-na">N/A</span>
                  <div class = "prod1-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="prod1-comment-textbox" maxlength="250"></textarea>
					<span class="prod1-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="prod2" name="prod2" type="checkbox" />
                  <label for = "prod2">Server-side reporting has been turned off</label>
                  <span class = "prod2-na">N/A</span>
                  <div class = "prod2-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="prod2-comment-textbox" maxlength="250"></textarea>
					<span class="prod2-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="prod3" name="prod3" type="checkbox" />
                  <label for = "prod3">Indexes are disabled via .htaccess file</label>
                  <span class = "prod3-na">N/A</span>
                  <div class = "prod3-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="prod3-comment-textbox" maxlength="250"></textarea>
					<span class="prod3-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="prod4" name="prod4" type="checkbox" />
                  <label for = "prod4">Robots.txt has been setup</label>
                  <span class = "prod4-na">N/A</span>
                  <div class = "prod4-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="prod4-comment-textbox" maxlength="250"></textarea>
					<span class="prod4-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="prod5" name="prod5" type="checkbox" />
                  <label for = "prod5">Site is setup on a monitoring service</label>
                  <span class = "prod5-na">N/A</span>
                  <div class = "prod5-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="prod5-comment-textbox" maxlength="250"></textarea>
					<span class="prod5-comment-characterLeft">250 Characters Max</span>
				</div><div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
                  </div>
                </li>
                <li>
                  <input id="prod6" name="prod6" type="checkbox" />
                  <label for = "prod6">Site is setup Website defender</label>
                  <span class = "prod6-na">N/A</span>
                  <div class = "prod6-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="prod6-comment-textbox" maxlength="250"></textarea>
					<span class="prod6-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
                <li>
                  <input id="prod7" name="prod7" type="checkbox" />
                  <label for = "prod7">All site-related accounts have complex passwords</label>
                  <span class = "prod7-na">N/A</span>
                  <div class = "prod7-comment">
                    <span class = "icon-comment"></span>
                    <div class = "comment-box">
					<label>Comments:</label>
					<textarea class="prod7-comment-textbox" maxlength="250"></textarea>
					<span class="prod7-comment-characterLeft">250 Characters Max</span>
				</div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </fieldset>
      </div>
    </div>
  </form>
  <div class = "footer">
    <a class="pure-button reset" href="#">Reset</a>
    <div class = "ready"></div>
    <div class="progressbar-container">
      <div class="progressbar-bar"></div>
      <div class="progressbar-label"></div>
    </div>
  </div>
</div>

Ready-to-Launch.markdown

Ready to Launch

A Pen by James Barnett on CodePen.

License.

script.js

$(document).ready(function(){
  
  /* for testing purposes only */
  /*$('input[id*=exp], input[id*=content]').attr('checked', true);
  $('input').attr('checked', true);*/
  
  $(".content, .brand, .seo, .val, .testing, .rwd, .perf, .worst, .forms, .contact,  .error, .prod").hide();
  
  /* intialize icons */
  $(".content-icon, .brand-icon, .seo-icon, .val-icon, .testing-icon, .rwd-icon, .perf-icon, .worst-icon, .forms-icon, .contact-icon,  .error-icon, .prod-icon").toggleClass("arrow-right");
  
  $(".exp-icon").toggleClass("arrow-down");
  
  /*************** toggle sections ***************/
  
  function toggleSection(sectionChoice){
    var action = ".toggle_" + sectionChoice;
    var icon = "." + sectionChoice + "-icon";
    var section = "." + sectionChoice;
    $(action).click(function(){ 
      $(icon).toggleClass("arrow-right");
      $(icon).toggleClass("arrow-down");
      $(section).slideToggle(); return false;
      
    });
  }
  
  toggleSection("exp"); toggleSection("content"); toggleSection("brand"); toggleSection("seo"); toggleSection("val"); toggleSection("testing"); toggleSection("rwd"); toggleSection("perf"); toggleSection("worst"); toggleSection("forms"); toggleSection("contact"); toggleSection("error"); toggleSection("prod");
  
  
  
  /*************** count sections ***************/ 
  
  var count = 0;
  var checked = 0;
  
  function countBoxes() { return $("input[type='checkbox']:enabled").length; }
  
  function countChecked() {
    checked = $("input[type='checkbox']:checked").length;
    count = countBoxes();
    console.log("boxes: " + count);
    console.log("checked: " + checked);
    var percentage = parseInt(((checked / count) * 100), 10);
    $(".progressbar-bar").progressbar({
      value: percentage
    });
    $(".progressbar-label").text(percentage + "% Complete");
    
    if (count === checked) { $(".ready").text('Ready to Launch!'); }
    else { $(".ready").text(''); }
    
    markComplete("exp"); markComplete("content"); markComplete("brand"); markComplete("seo"); markComplete("val"); markComplete("testing"); markComplete("rwd"); markComplete("perf"); markComplete("worst"); markComplete("forms"); markComplete("contact"); markComplete("error"); markComplete("prod");
  }
  
  $(":checkbox").click(countBoxes);
  countChecked();
  $(":checkbox").click(countChecked);
  
  /* mark section completed */
  
  function countBoxesInSection(section) { 
    answer = $("input[type='checkbox'][name*='" + section + "']:enabled").length; 
    console.log("boxes in section: " + answer);
    return answer;
  }
  
  function countCheckedInSection(section) {
    answer = $("input:checked[name*='" + section + "']").length;  
    console.log("checked in section: " + answer);
    return answer;
  }
  
  function markComplete(section) {
    if (countBoxesInSection(section) === countCheckedInSection(section)) {
      $("." + section  +"-complete").addClass("complete");
    }
    else {
      $("." + section  +"-complete").removeClass("complete");
    }
  }
  
  /* reset all checks*/
  $( ".reset" ).click(function() { 
    $('input').attr('checked', false); 
    $('input').attr('disabled', false); 
    countChecked();
  });
  
  /* mark as N/A */
  
  /* If checkbox doesn't have class "na" then disable checkbox and add the class. If checkbox currently has class "na" then checkbox is currently disabled, re-enable it and remove the class  */
  $( "span[class*='na']" ).click(function() { 
    if ($( this ).hasClass( "na" ) !== true) {
      $(this).addClass("na");
      $(this).siblings( "input" ).attr("disabled", true); 
      $(this).siblings( "input" ).attr("checked", false); 
    }
    else {
      $(this).siblings( "input" ).attr("disabled", false); 
      $(this).removeClass("na");
    }
    countChecked();
  });
  
  /* comment box */
  
  $( "div[class*='comment'] .icon-comment" ).click(function() { 
    $( this ).siblings(".comment-box").slideToggle();
  });
  
  /* comment box character count */
  
  /* based on:
 http://www.findsourcecode.com/jquery/how-to-count-number-of-characters-in-textarea-jquery/ */
  
  var charMax = 250;
  $("[class*='comment-textbox']").keyup(function () {
    var textLength = $(this).val().length;
    var charLeft = $(this).siblings("[class*='characterLeft']");
    if (textLength >= charMax) {
      $(charLeft).text('You have reached the limit of ' + charMax + ' characters');
    } else {
      var count = charMax - textLength;
      $(charLeft).text(count + ' Characters Left');
    }
    
    /* show comment icon when comment is present */
    var currentComment = $(this).parents("div[class*='-comment']");
    if (textLength > 0 ) { $(currentComment).addClass("comment-present"); }
    else { $(currentComment).removeClass("comment-present"); }
  });
  
});

style.css

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*************** Resets ***************/ 

ul, li { list-style: none; }	
h1, h2, div, ul, li, a, input, label, textarea, fieldset { 
  margin: 0;
  padding: 0;
}

/*************** Containers ***************/

body { background: url(http://subtlepatterns.com/patterns/paper_fibers.png); }

/* container has an ID instead of a class has a hack in case extra specificity is needed in a selector */

#container { 
  margin: auto;
  padding-left: 75px;
  padding-top: 0px;
  width: 900px;
}

.details { margin-left: 150px; }
fieldset.list { border: none; }
.footer {
  height: 70px;
  padding-top: 20px;
  clear: both;
}

/*************** Lined Paper ***************/

.pad {
  color: #444;
  background-color: #e1e9a0;
  width: 775px;
  box-shadow: 10px 3px 20px #999;
}

.pad-header {
  margin-top: 20px;
  height: 70px;
  width: 775px;
  background-color: #623B18;
  box-shadow: 10px 3px 20px #999;
}

.page { 
  float: left;
  width: 775px;
  box-shadow: 10px 3px 20px #999;
}

/* add extra line to top of pad*/

h2 ~ ul, h2, .pad-container {
  background: -webkit-linear-gradient(#6496b9, #e1e9a0 2px);
  background: -moz-linear-gradient(#6496b9, #e1e9a0 2px);
  background: linear-gradient(#6496b9, #e1e9a0 2px);
  background-size: 90px 30px;
}

h2 + ul { padding-bottom: 30px; }  
.top { padding-top: 30px; }
.pad-container { 
  min-height: 900px; 
  padding-bottom: 30px;
}

/* lines for list items */

h2 { padding-left: 50px; } 
h2 ~ ul { 
  padding-left: 10px; 
  padding-right: 30px;
}

input[type=checkbox] + label:hover { 
  background-color: #E4F9AC; 
  opacity: 0.6;
}

/*************** Arrow Icons **************/

/* expand click target for toggle to include arrow icon */
[class*="icon"].arrow-down { margin-right: 12px; }
[class*="toggle"] { padding-left: 4px; }
.arrow-right { width: 20px; }

.arrow-right {
  display:inline-block;
  position: relative; 
  top: -2px;
  left: 0px;
  border-bottom: 9px solid transparent;
  border-top: 9px solid transparent;
  border-left: 9px solid #383838;
}

.arrow-down  {
  display:inline-block;
  position: relative; 
  top: -5px;
  left: -3px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #383838;
}

/*************** Checkboxes ***************/

/* to hide the checkbox itself */
input[type=checkbox] { 
  display:none;
  position: relative;
} 

input[type=checkbox] + label {
  padding: 0 10px;
  border-radius: 5px;
}

input[type=checkbox] + label:before, input[type=checkbox]:checked + label:before {
  font-family: FontAwesome;
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
  font-size: 24px;
}

/* checkbox w/ space for the checkbox */
input[type=checkbox] + label:before { 
  content: "\f096 "; 
  letter-spacing: 20px;
} 

input[type=checkbox]:checked + label:before { 
  content: "\f046"; 
  letter-spacing: 7px;
} 

/*************** Mark as N/A **************/

h2 + ul li {
  position: relative;
  padding-left: 65px;
}

span[class*="na"] { visibility: hidden; }
input:disabled + label, h2 + ul li:hover > span[class*="na"], .icon-comment { color: rgba(71,71,71,0.5); }

/* postion & style N/A button */
h2 + ul li:hover > span[class*="na"] { 
  visibility: visible;
  position: absolute;
  left: 25px;
  top: 4px;
  padding: 0 5px;
  line-height: 1.5em;
  
  font-size: 0.75em;
  cursor: pointer;
} 

/* replace checkbox w/ "n/a" */
input:disabled + label:before { 
  display: inline-block;
  margin: 3px 15px 5px -3px;
  font-size: 16px;
  letter-spacing: -2px;
  content:"N/A"; 
}

/*************** Comment Box **************/

.comment-box { display: none; }

div[class*="comment"] label { margin-left: 10px;}
[class*="comment"] textarea {
	width: 600px;
	height: 90px;
  margin: 13px 0 13px 25px;
  background: #E0E0E0; 
}

.icon-comment { display: none; }
.comment-present .icon-comment { color: rgba(71,71,71,1); }
h2 + ul li:hover .icon-comment, .comment-present .icon-comment { 
  display: inline-block;
  position: absolute;
  left: 3px;
  top: 4px;
  padding: 0 5px;
  line-height: 1.5em;
  
  font-size: 0.75em;
  cursor: pointer;
} 

[class*='comment-characterLeft'] { 
  display: inline-block;
  margin: 0 0 30px 25px; 
}

/*************** Section Complete Check **************/

h2 { position: relative; }

.top .complete:before { top: 34px;}
.complete:before {
  position: absolute;
  top: 5px;
  left: 15px;
  
  font-family: FontAwesome;
  font-size: 24px;
  line-height: 1em;
  content: "\f058";
  color: green;
  opacity: 0.5;
}

/*************** Progress Bar ***************/

.ui-progressbar-value { background: #6496b9; }
.progressbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; 
  border-radius: 0;
}

.progressbar-bar { 
  height: 25px;
  background: #ccc;
  opacity: .8;
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  border: none;
}

.progressbar-label {
  position: absolute;
  top: 0px;
  left: 45%;
  z-index: 2;
}

/* reset button */
.footer .reset {
  position: fixed;
  bottom: 40px;
  right: 25px; 
  
  font-size: 22px;
  padding: 3px 15px;
  background: #ABC6D9;
}

/*************** Typography ***************/

h1 { 
  font-size: 75px;
  color:  #6496b9;
}

h1 ~ div { 
  font-size: 26px;  
  line-height: 26px;
}

body { font-size: 22px;  }
h2, a:link, a:visited { font-size: 30px; }
h2, a:link, a:visited, li { line-height: 30px; }

h1, h2 { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; }
body { font-family: Verdana, Arial, Helvetica, sans-serif; }

h2, a:link, a:visited, body {  color: #474747; }
a:link, a:visited { text-decoration: none; }