Difference between revisions of "Team:Imperial College/Results"

(Blanked the page)
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{:Team:Imperial_College/Templates/NavBar}}
 
  
 
<html>
 
<head>
 
<style>
 
 
#expt1, #expt2, #expt3, #expt4, #expt5, #expt6 #expt7 {
 
    width:100%;
 
    height:5px;
 
 
}
 
 
.contents ul{
 
    width:40%;
 
    margin-top:5%;
 
    float:left;
 
    box-sizing: border-box;
 
    margin-left:6.666%;
 
    list-style-type: none;
 
    background:none;
 
}
 
 
.contents ul li{
 
    width: 100%;
 
    margin-bottom:5%;
 
    cursor: pointer;
 
    border-radius:20px;
 
    background:none;
 
    transition: border 0.3s ease;
 
    box-sizing:border-box;
 
}
 
 
.contents ul li a{
 
    padding-top: 5px;
 
    padding-bottom: 0px;
 
    margin-top: 10px;
 
    margin-left: 0px;
 
    text-decoration: none;
 
    font-size: 30px;
 
    font-family: 'Varela Round', sans-serif;
 
    color: #374785;
 
    border:none;
 
    background:none;
 
 
 
}
 
 
.contents ul li a:hover{
 
    font-weight:bold;
 
}
 
 
 
 
.allButton {
 
    font-size: 30px;
 
    color: #374785;
 
    font-family: "Varela Round", sans-serif;
 
    font-weight:normal;
 
    background-color:none;
 
   
 
}
 
 
.open{
 
    float:right;
 
    width:auto;
 
    box-sizing: border-box;
 
    margin-top:20px;
 
    margin-right:10%;
 
    font-size:30px;
 
    font-family:"Varela Round", sans-serif;
 
    color:#374785;
 
}
 
 
.expandButton:hover {
 
    cursor:pointer;
 
    background-color:red;
 
    color:#F76C6C;
 
}
 
 
 
.accordion {
 
    float: left;
 
    padding-top: 5px;
 
    margin-bottom:5px;
 
    margin-left:10%;
 
    cursor: pointer;
 
    text-align:left;
 
    margin-left:20%;
 
    border:none;
 
    transition: border-bottom 0.1s linear;
 
    font-size: 25px;
 
    font-weight:bold;
 
    line-height: 50px;
 
    font-family:"Varela Round", sans-serif;
 
    color:#374785;
 
}
 
 
 
.accordion:hover {
 
    border-bottom: solid #F8E9A1 3px;
 
}
 
 
 
 
.description {
 
    margin-bottom:5px;
 
    width: 70%;
 
    margin-left:23%;
 
    float:left;
 
    border:none;
 
    max-height: auto;
 
}
 
 
.colorChange{
 
    transition: color 0.5s ease;
 
}
 
 
.slowRotate{
 
    transition: transform 0.3s linear;
 
}
 
 
.highlight{
 
    color:#374785;
 
    font-weight:bold;
 
    text-decoration:none;
 
}
 
 
.figure{
 
    width: 30%;
 
    margin-top:5px;
 
    margin-left:35%;
 
    box-sizing: border-box;
 
}
 
 
</style>
 
 
</head>
 
 
<body>
 
<div class="container">         
 
        <div class="content">
 
 
            <div class="titleimg">
 
                    <h1>Experiments</h1>
 
                    <br/>
 
                    <br/>
 
            <img src="https://static.igem.org/mediawiki/2018/7/71/T--Imperial_College--experiment.png" alt="" width="28%"; >
 
            </div>
 
               
 
 
                <h3>Building Constructs</h3>
 
 
         
 
                <!--Start Experiment 1-->
 
                <div id="expt1"></div>
 
                <h4 > ON-OFF System Construct Assembly</h4>
 
                <div onclick="openAll('expt1p');" class="expandButton">
 
                        <p class="open expt1p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt1p slowRotate"></i>
 
                    </div>
 
                </div>
 
     
 
                <div class="clr"></div>
 
   
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt1p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt1p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
               
 
               
 
                   
 
                <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt1p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
 
       
 
                <!--Start Experiment 2-->
 
                <div id="expt2">
 
                <h4>ON-OFF System on Agar</h4>
 
                <div onclick="openAll('expt2p');" class="expandButton">
 
                    <p class="open expt2p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt2p slowRotate"></i>
 
                    </div>
 
                </div>
 
                </div>
 
                <div class="clr"></div>
 
               
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt2p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt2p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
               
 
                  <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt2p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
         
 
   
 
         
 
                <!--Start Experiment 3-->
 
                <div id="expt3"></div>
 
                <h4 > Electronic Stimulation</h4>
 
                <div onclick="openAll('expt3p');" class="expandButton">
 
                    <p class="open expt3p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt3p slowRotate"></i>
 
                    </div>
 
                </div>
 
               
 
                <div class="clr"></div>
 
               
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt3p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt3p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
               
 
                   
 
                <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt3p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
 
 
 
                <!--Start Experiment 4-->
 
                <div id="expt4"></div>
 
                <h4 > </h4>
 
                <div onclick="openAll('expt4p');" class="expandButton">
 
                    <p class="open expt4p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt4p slowRotate"></i>
 
                    </div>
 
                </div>
 
               
 
                <div class="clr"></div>
 
               
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt4p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt4p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
               
 
               
 
                <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt4p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
 
 
                <!--Start Experiment 5-->
 
                <div id="expt5"></div>
 
                <h4> </h4>
 
                <div onclick="openAll('expt5p');" class="expandButton">
 
                    <p class="open expt5p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt5p slowRotate"></i>
 
                    </div>
 
                </div>
 
               
 
                <div class="clr"></div>
 
               
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt5p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt5p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
           
 
                   
 
                <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt5p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
 
           
 
 
                <!--Start Experiment 6-->
 
                <div id="expt6"></div>
 
                <h4 ></h4>
 
                <div onclick="openAll('expt6p');" class="expandButton">
 
                    <p class="open expt5p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt6p slowRotate"></i>
 
                    </div>
 
                </div>
 
               
 
                <div class="clr"></div>
 
               
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt6p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt6p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
               
 
                   
 
                <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt6p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
 
               
 
 
                <!--Start Experiment 7-->
 
                <div id="expt7"></div>
 
                <h4 > </h4>
 
                <div onclick="openAll('expt7p');" class="expandButton">
 
                    <p class="open expt7p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt7p slowRotate"></i>
 
                    </div>
 
                </div>
 
               
 
                <div class="clr"></div>
 
               
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt7p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt7p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
               
 
               
 
                <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt7p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
 
    <h3>Promoter Library Characterisation</h3>
 
 
                <!--Start Experiment 8-->
 
                <div id="expt8"></div>
 
                <h4 class="center" > BASIC</h4>
 
                <div onclick="openAll('expt8p');" class="expandButton">
 
                    <p class="open expt8p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 
                    <div class="open" style="margin-right:5px;">
 
                        <i  class="fas fa-arrow-circle-down expt8p slowRotate"></i>
 
                    </div>
 
                </div>
 
               
 
                <div class="clr"></div>
 
               
 
                <div type="button" class="accordion"> Description </div>
 
                <div class="description">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
           
 
                <div type="button" class="accordion">Relevance</div>
 
                <div class="panel expt8p">
 
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
 
                <div type="button" class="accordion">Results</div>
 
                <div class="panel expt8p">
 
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 
                </div>
 
               
 
             
 
                   
 
                <div type="button" class="accordion" >Summary</div>
 
                <div class="panel expt8p">
 
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 
                </div>
 
                <div class="clr"></div>
 
            <!--End Experiment-->
 
   
 
 
                    <script>
 
                        var acc = document.getElementsByClassName("accordion");
 
                        var i;
 
                        console.log(acc)
 
                        for (i = 0; i < acc.length ; i++) {
 
                            acc[i].addEventListener("click", function() {
 
                                this.classList.toggle("active");
 
                                var panell = this.nextElementSibling;
 
                                if (panell.style.maxHeight) {
 
                                    panell.style.maxHeight = null;
 
                                } else {
 
                                    panell.style.maxHeight = (panell.scrollHeight + "px"); 
 
                                }
 
                            });
 
                        }
 
               
 
 
               
 
                        function openAll(expt) {
 
                            console.log("click active")
 
                            var i, panelList;
 
                            panelList = document.getElementsByClassName(expt);
 
                            console.log(panelList)
 
                           
 
                           
 
                            for (i = 2; i < panelList.length; i++) {
 
                                if (panelList[i].style.maxHeight == 0) {
 
                                    console.log(panelList[i].style.maxHeight)
 
                                    panelList[i].style.maxHeight = panelList[i].scrollHeight + "px"
 
                                    console.log("open")
 
                                    panelList[0].style.color = "#F76C6C";
 
                                    panelList[1].style.color = "#F76C6C";
 
                                    panelList[1].style.transform = "rotate(180deg)"
 
               
 
                                } else {
 
                                    console.log(panelList[i].style.maxHeight)
 
                                    panelList[i].style.maxHeight = null ;
 
                                    console.log("close");
 
                                    panelList[0].style.color = "#374785";
 
                                    panelList[1].style.color = "#374785";
 
                                    panelList[1].style.transform = "rotate(0deg)";
 
                                }
 
                            }
 
                           
 
                        } 
 
                   
 
                    </script>
 
 
 
 
 
        </div>
 
    </div>
 
   
 
</body>
 
</html>
 
 
 
{{:Team:Imperial_College/Templates/Footer}}
 

Latest revision as of 18:04, 11 October 2018