Difference between revisions of "Team:RUM-UPRM/Notebook"

Line 1: Line 1:
 
{{RUM-UPRM}}
 
{{RUM-UPRM}}
 
<html lang="en">
 
<html lang="en">
 +
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
.collapsible {
 +
  background-color: #777;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 18px;
 +
  width: 100%;
 +
  border: none;
 +
  text-align: left;
 +
  outline: none;
 +
  font-size: 15px;
 +
}
 +
 +
.active, .collapsible:hover {
 +
  background-color: #555;
 +
}
 +
 +
.content {
 +
  padding: 0 18px;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
  background-color: #f1f1f1;
 +
}
 +
</style>
 +
</head>
 +
 
<body>
 
<body>
 
<!--Preloader-->
 
<!--Preloader-->
Line 31: Line 61:
 
<div class="d-flex h-100 align-items-center">
 
<div class="d-flex h-100 align-items-center">
 
           <h3 class="display-5">Lab Protocols</h3>
 
           <h3 class="display-5">Lab Protocols</h3>
−
<button class="collapsible">Ligation Protocol</button>
 
−
<div class="content">
 
−
<object data="https://static.igem.org/mediawiki/2020/1/11/T--RUM-UPRM--LigationProtocol.pdf" width="100%" height="600" />
 
−
</object>
 
−
</div>
 
  
−
<button class="collapsible">DNA Extration</button>
+
<h2>Animated Collapsibles</h2>
−
<div class="content">
+
−
  <object data="https://static.igem.org/mediawiki/2020/e/e1/T--RUM-UPRM--DNAEXTRACTION.pdf
+
−
 
+
−
" type="application/pdf" width="100%" height="600" />
+
−
</object>
+
−
</div>
+
  
−
<button class="collapsible">DNA Precipitation</button>
+
<p>A Collapsible:</p>
 +
<button class="collapsible">Open Collapsible</button>
 
<div class="content">
 
<div class="content">
−
  <object data="https://static.igem.org/mediawiki/2020/2/23/T--RUM-UPRM--DNAPRECIPITATION.pdf" type="application/pdf" width="100%" height="600" />
+
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
−
</object>
+
 
</div>
 
</div>
  
−
<button class="collapsible">Gel DNA Extraction</button>
+
<p>Collapsible Set:</p>
 +
<button class="collapsible">Open Section 1</button>
 
<div class="content">
 
<div class="content">
−
  <object data="https://static.igem.org/mediawiki/2020/0/07/T--RUM-UPRM--Gel_extraction.pdf" type="application/pdf" width="100%" height="600" />
+
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
−
</object>
+
 
</div>
 
</div>
−
 
+
<button class="collapsible">Open Section 2</button>
−
<button class="collapsible">Bacterial Transformation</button>
+
 
<div class="content">
 
<div class="content">
−
  <object data="https://static.igem.org/mediawiki/2020/a/ac/T--RUM-UPRM--Bacterial_Transformation.pdf"type="application/pdf" width="100%" height="600" />
+
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
−
</object>
+
 
</div>
 
</div>
−
 
+
<button class="collapsible">Open Section 3</button>
−
 
+
−
<button class="collapsible">Inoculation</button>
+
 
<div class="content">
 
<div class="content">
−
  <object data="https://static.igem.org/mediawiki/2020/3/39/T--RUM-UPRM--Inoculation.pdf" type="application/pdf" width="100%" height="600" />
+
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
−
</object>
+
 
</div>
 
</div>
−
 
−
 
−
<button class="collapsible">Preparation of Competent Cells</button>
 
−
<div class="content">
 
−
  <object data="https://static.igem.org/mediawiki/2020/d/dc/T--RUM-UPRM--Competent_Cells.pdf"type="application/pdf" width="100%" height="600" />
 
−
</object>
 
−
</div>
 
−
 
−
<button class="collapsible">Gibson Assembly</button>
 
−
<div class="content">
 
−
  <object data="https://static.igem.org/mediawiki/2020/3/30/T--RUM-UPRM--GibsonAssembly.pdf"type="application/pdf" width="100%" height="600" />
 
−
</object>
 
−
</div>
 
−
 
  
 
<script>
 
<script>
 
var coll = document.getElementsByClassName("collapsible");
 
var coll = document.getElementsByClassName("collapsible");
 
var i;
 
var i;
 +
 
for (i = 0; i < coll.length; i++) {
 
for (i = 0; i < coll.length; i++) {
 
   coll[i].addEventListener("click", function() {
 
   coll[i].addEventListener("click", function() {

Revision as of 02:30, 23 October 2020

Lab Protocols

Animated Collapsibles

A Collapsible:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Set:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Copyright © UPRM-RUM 2020