Line 4: | Line 4: | ||
+ | <body> | ||
+ | <div class="inner-border" style="border-top:none;"> | ||
+ | <div class ="all-wrapper"> | ||
+ | <div class="content-wrapper"> | ||
− | |||
− | |||
− | |||
− | <p> | + | |
+ | <h1> Modeling DATA</h1> | ||
+ | |||
+ | <p>Use this as an overview...i gave you an accordion to play with.</p> | ||
</div> | </div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
+ | <button class="accordion"> PLATE READER SETUP </button> | ||
+ | <div class="panel" style="line-height: 17em;"> | ||
− | <div class="column | + | <div class="row"> |
− | <h3> | + | <div class="column left"> |
− | < | + | <table> |
− | + | <tr> | |
− | < | + | <td style="padding:0;"> |
− | + | <h3><i>Abs<sub>600</sub></i></h3> | |
− | </ | + | </td> |
+ | <td> | ||
+ | <ul style="list-style: none; margin: 0; padding: 1em; text-align:left; border-left: .5px solid black"> | ||
+ | <li> Wavelength: 600nm </li> | ||
+ | <li> Read Speed: Normal </li> | ||
+ | <li> Delay: 100 msec </li> | ||
+ | </ul> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <div class="column right"> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <td style="padding:0;"> | ||
+ | <h3><i>Fluorescence</i></h3> | ||
+ | </td> | ||
+ | <td> | ||
+ | <ul style="list-style: none; margin: 0; padding: 1em; text-align:left; border-left: .5px solid black"> | ||
+ | <li> Excitation: 485 </li> | ||
+ | <li>Emission: 525</li> | ||
+ | <li>Optics: Top</li> | ||
+ | <li>Gain: 50</li> | ||
+ | <li>Light Source: Xenon Flash</li> | ||
+ | <li>Lamp Energy: High</li> | ||
+ | <li>Read Speed: Normal</li> | ||
+ | <li>Delay: 100 msec</li> | ||
+ | <li>Read Height: 7 mm</li> | ||
+ | </ul> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | < | + | </body> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | <script> |
− | + | /***************************************************JAVASCRIPT STARTS HERE**************************************************/ | |
− | + | var acc = document.getElementsByClassName("accordion"); | |
− | + | var close = document.getElementsByClassName("accordion-closer"); | |
− | + | var i; | |
− | + | ||
− | + | ||
− | </ | + | for (i = 0; i < acc.length; i++) { |
+ | acc[i].addEventListener("click", function() { | ||
+ | /* Toggle between adding and removing the "active" class, | ||
+ | to highlight the button that controls the panel */ | ||
+ | this.classList.toggle("active"); | ||
+ | /* Toggle between hiding and showing the active panel */ | ||
− | + | var panel = this.nextElementSibling; | |
− | + | if (panel.style.display === "block") { | |
− | + | panel.style.display = "none"; | |
− | + | } else { | |
− | + | panel.style.display = "block"; | |
− | + | } | |
− | + | if (panel.style.maxHeight) { | |
− | + | panel.style.maxHeight = null; | |
− | + | } else { | |
− | + | panel.style.maxHeight = panel.scrollHeight + "px"; | |
− | + | } | |
− | + | }); | |
− | + | } | |
− | </ | + | for (i = 0; i < close.length; i++) { |
+ | close[i].addEventListener("click", function(acc) { | ||
+ | |||
+ | this.parentElement.previousElementSibling.classList.toggle("active"); | ||
+ | var panel = this.parentElement; | ||
+ | var accordion = panel.previousElementSibling; | ||
+ | accordion.scrollIntoView(); | ||
+ | |||
+ | panel.style.display = "none"; | ||
+ | if (panel.style.maxHeight) { | ||
+ | panel.style.maxHeight = null; | ||
+ | } else { | ||
+ | panel.style.maxHeight = panel.scrollHeight + "px"; | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | /***************************************************JAVASCRIPT ENDS HERE****************************************************/ | ||
+ | </script> | ||
</html> | </html> | ||
+ | {{:Team:NUS_Singapore-A/Templates/Footer}} |
Revision as of 12:03, 14 October 2018
CONNECT WITH US