Difference between revisions of "Team:Northwestern/Lab"

Line 13: Line 13:
 
<script src="//use.edgefonts.net/aladin.js"></script>
 
<script src="//use.edgefonts.net/aladin.js"></script>
  
 +
<style>
 +
button.accordion {
 +
    background-color: #eee;
 +
    color: #444;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    font-size: 15px;
 +
    transition: 0.4s;
 +
}
 +
 +
button.accordion.active, button.accordion:hover {
 +
    background-color: #ddd;
 +
}
 +
 +
button.accordion:after {
 +
    content: '\002B';
 +
    color: #777;
 +
    font-weight: bold;
 +
    float: right;
 +
    margin-left: 5px;
 +
}
 +
 +
button.accordion.active:after {
 +
    content: "\2212";
 +
}
 +
 +
div.panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    transition: max-height 0.2s ease-out;
 +
}
 +
</style>
  
  
 
<body>
 
<body>
 +
 +
<button class="accordion">Section 1</button>
 +
<div class="panel">
 +
  <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>
 +
</div>
 +
 +
<button class="accordion">Section 2</button>
 +
<div class="panel">
 +
  <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>
 +
</div>
 +
 +
<button class="accordion">Section 3</button>
 +
<div class="panel">
 +
  <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>
 +
</div>
 +
 +
<script>
 +
var acc = document.getElementsByClassName("accordion");
 +
var i;
 +
 +
for (i = 0; i < acc.length; i++) {
 +
  acc[i].onclick = function() {
 +
    this.classList.toggle("active");
 +
    var panel = this.nextElementSibling;
 +
    if (panel.style.maxHeight){
 +
      panel.style.maxHeight = null;
 +
    } else {
 +
      panel.style.maxHeight = panel.scrollHeight + "px";
 +
    }
 +
  }
 +
}
 +
</script>
  
 
</body>  
 
</body>  

Revision as of 16:16, 25 August 2017

Northwestern Template Northwestern Template

Overview Silver Gold Integrated Engagement
Overview Basic
Experiments Results Notebook Saftey Interlab
Description Design
About Us Attributions Collaboration
Home

Northwestern Template

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.