NIPT

Fiddle for NIPT

by Thet Hlaing

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600,700,500"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<div id='niptpage'>
  <div class="nipt_content_holder">
  <nav>
    <a href="#" id="menuicon">Menu</a>
    <a href="#whatisNIPT" class="current">What is NIPT?</a>
    <a href="#why_get_tested">Why get tested?</a>
    <a href="#conditions">Conditions</a>
    <a href="#howitwork">How it works?</a>
    <a href="#faq">FAQ</a>
  </nav>
  </div>  
  <section id="whatisNIPT">
    <div class="nipt_content_holder">
      <header>
        <h1>What is NIPT?</h1></header>
      Non-invasive prenatal testing (“NIPT”) is a relatively new type of screening test that analyses fetal DNA in mother’s blood to screen for fetal chromosomal abnormalities.
      <br/>
      <br/> In 1997, scientists first reported the presence of small amounts of cell-free fetal DNA among the circulating cell-free DNA in the mother’s blood as early as four gestational weeks1. The rapid development of next generation sequencing technology
      makes it possible to detect fetal aneuploidies non-invasively and with high accuracy by analysing the cell-free DNA in the mother’s blood.
    </div>
  </section>
  <section>
    <div class="nipt_content_holder">
      <header>
        <h3>About iGene<sup>TM</sup></h3></header>
      Cordlife has partnered with iGene Diagnostics, a Singapore-based molecular diagnostics company, to offer iGene™ in Indonesia. Compared with other NIPTs, iGene™ has superior clinical performance and is able to screen with very high accuracy for the presence
      of common chromosomal abnormalities, including Down Syndrome, Edwards Syndrome and Patau Syndrome.
      <div...

CSS

body{background-color:#fff;}
#niptpage sup{font-size:11px;}
#niptpage section{padding:50px 0px 10px;}
#niptpage h2,h3{font-size:18px;}
.nipt_content_holder{max-width:920px; margin:0 auto; color:#555;}
#niptpage{font-family: font-family: 'Source Code Pro' ;}
#niptpage h1,h2{text-align:center; font-size:20px; font-weight:500; margin-top:0px;}
#niptpage h3{font-weight:500;}
#niptpage .legend{margin-top:30px; font-size:14px;}

/*Menu */
#niptpage nav{display:flex; flex-flow:row; align-items:stretch; margin-top:0px; max-width:920px;}
#niptpage nav.fixed{position:fixed; width:100%;top:0px;margin-top:0px;  z-index:3;}
#niptpage nav a{width:100%; text-decoration:none; color:#00b1bc; text-align:center; padding:5px 0px;  background-color:#E4E4E4; border-left:1px solid #fff; border-bottom:2px solid #E4E4E4;}
#niptpage nav a:first-child{border-left:none;}
#niptpage nav a.current{border-bottom:2px solid #00b1bc;}
#niptpage #menuicon{ position: relative;display:none;}
#niptpage #menuicon:before {content: "";position: absolute; left: 18px;top: 0.55em;width: 1em;height: 0.15em; background: #00b1bc; box-shadow: 0 0.25em 0 0 #00b1bc,0 0.5em 0 0 #00b1bc;}
@media screen and (max-width:920px){
  #niptpage nav.fixed{left:0px;}
}
@media screen and (max-width:600px){
  #niptpage nav{flex-flow:column;}
  #niptpage nav a{display:none;}
  #niptpage nav a.current{border-bottom:none;}
  #niptpage #menuicon,#niptpage nav.show a{display:block; border-bottom:1px solid #fff;}  
}
/*IGene Section*/
#igene_description{display:flex; flex-flow:row; margin-top:20px;align-items:center;justify-content:space-around;}
#igenelogo{width:100px; height:100px; margin-right:10px;}
#igene_link_holder{display:flex;flex-flow:row;}
#igene_link_holder a{width:100%; color:#fff; background-color:#542461;margin:0px 1px; font-size:12px; text-decoration:none; text-align:center;padding:5px 10px;}
@media screen and (max-width:580px){    
  #igene_description{flex-flow:column;align-items:stretch;}
  #igenelogo{margin:0...

JavaScript

jQuery(function() {
   jQuery("#menuicon").click(function(){
   	   jQuery("#niptpage nav").toggleClass("show");
       event.preventDefault();
   });
   jQuery("#dod").datepicker({
     minDate: 0
   });
   jQuery("#doctorOfferForm").submit(function(event) {
     submitDoctorOffersForm()
     event.preventDefault();
   });
    jQuery("nav a").click(function(evn){
        evn.preventDefault();
        jQuery('html,body').scrollTo(this.hash, this.hash); 
    });
   jQuery(document).scroll(function(){      
      if(jQuery(this).scrollTop() > 30){         
      			if(!jQuery("#niptpage nav").hasClass("fixed")){
          		jQuery("#niptpage nav").addClass("fixed");    
            }
      }
      else
      {
      	if(jQuery("#niptpage nav").hasClass("fixed")){
      		jQuery("#niptpage nav").removeClass("fixed");
        }
      }
   });
    
    jQuery(".conditiontable>div:not(.full_description)").click(function(){
   		 if (window.matchMedia('(max-width: 600px)').matches) 
			{
   		 		jQuery(this).children('.description').toggleClass("show");       
       }
       else
       {
          if(jQuery(this).hasClass('current'))
          {
          		jQuery(jQuery(this).data('target')).removeClass('show');
              jQuery(this).removeClass('current');
          }
          else
          {          
          jQuery('.conditiontable>div[data-target='+jQuery(this).data('target')+']').each(function(){
          jQuery(this).removeClass('current');
          });
          
          jQuery(this).addClass('current');
       		var Content = jQuery(this).children('.description').html();      
       		jQuery(jQuery(this).data('target')).html(Content);
          if(!jQuery(jQuery(this).data('target')).hasClass('show'))
          {
          		jQuery(jQuery(this).data('target')).addClass('show')
          }
          }
       }
   });         
    
 });

 function submitDoctorOffersForm() {
   var doctorName = jQuery("#doctorname").val();
   var yourname =...