iGene Conditions Table (English)

by Thet Hlaing

HTML

<div class='conditionheader'>
Trisomy Aneuploidies
</div>
<div id="conditiontable_1stgroup" class="conditiontable">
<div data-target="#conditionaltable_firstrow_des">T21<br/>
 <span>(Down Syndrome)</span>
 <div class="description">
  <span>Affects one in 800 newborns</span><br/>
   Individuals with Down Syndrome (Trisomy 21) are characterised by typical facial features such as an oval-shaped face and eyes that slant upwards. Most individual diagnose with Down syndrome will have some degree of learning difficulty, delayed speech development and a delay in motor development. <br/>
    Approximately 50% of babies with Down syndrome are born with a heart defect and are also at risk of developing other medical conditions.<br/>
  Although women of any age can have a child with Down syndrome, the chance of having a child with this condition increases with maternal age.

  </div>
</div>	
<div data-target="#conditionaltable_firstrow_des">T18<br/>
  <span>(Edwards Syndrome)</span>
  <div class="description">
  <span>Affects one in 5,000 newborns</span><br/>
   Edwards Syndrome (Trisomy 18) is due to an extra copy of chromosome 18, which is associated with a high rate of miscarriages. Many individuals with trisomy 18 die before birth or within their first month. Only 5-10% of affected children live past their first year, and often have severe intellectual disability or congenital heart defects.
  </div>  
</div>
<div data-target="#conditionaltable_firstrow_des">	T13<br/>
  <span>(Patau Syndrome)</span>
  <div class="description">
  <span>Affects one in 16,000 newborns</span><br/>
   Patau Syndrome (Trisomy 13) is due to an extra copy of chromosome 13, which is associated with a high rate of miscarriages. Many foetuses don’t survive until full-term and are stillborn or spontaneously abort. Infants born with Trisomy 13 usually have severe congenital heart defects and other medical conditions, and survival beyond the first year is rare. Features include slow growth before...

CSS

.conditionheader{background-color:#492AF4;color:#fff; text-align:center;border:1px solid #fff;padding:5px 0px;}
.conditiontable{display:flex;flex-flow:row;flex-wrap: wrap; align-items:stretch;  background-color:#E4E0E9; text-align:center;}

.conditiontable>div{border-right:1px solid #fff;border-bottom:1px solid #fff; color:#555;padding:5px 0px;font-weight:500;}
.conditiontable>div.current{ background-color: #6060D7; color: #fff;}
.conditiontable span{font-weight:300;font-style:italic;}
#conditiontable_1stgroup>div:not(.fill_row),
#conditiontable_3rdgroup>div:not(.fill_row)
{width:33.1%;}
#conditiontable_2ndgroup>div:not(.fill_row){width:24.8%;}
.fill_row{width:100%}

.full_description
{display:none; text-align:justify; padding:5px !important;}

.full_description.show
{display:block;}


.conditiontable .description{display:none;}
.conditiontable .description{overflow:hidden; text-align:justify; height:auto;max-height:0px; padding:0px; transition:max-height 1s ease; -webkit-transition:max-height 1s ease; padding:0px 5px;}
.conditiontable .description.show{max-height:500px;}
.conditiontable .description h3{text-align:left;}
.conditiontable .description span{text-align:left; display:block; padding-top:5px;}

@media screen and (max-width:600px){
  .conditiontable{flex-flow:column;}
  #conditiontable_1stgroup>div:not(.fill_row),#conditiontable_3rdgroup>div:not(.fill_row),#conditiontable_2ndgroup>div:not(.fill_row){width:100%;}
.full_description.show{display:none;}
.conditiontable .description{display:block;}
.conditiontable>div.current{ background-color: #E4E0E9; color: #555;}
}

JavaScript

jQuery(document).ready(function(){
   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')
          }
          }
       }
   });         
});