Difference between revisions of "Team:UChicago/Notebook"

Line 85: Line 85:
 
<h2>Notebook</h2>
 
<h2>Notebook</h2>
 
</div>
 
</div>
 +
<button class="collapsible">June</button>
 +
<div class="content">
 +
  <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="collapsible">July</button>
 +
<div class="content">
 +
  <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="collapsible">August</button>
 +
<div class="content">
 +
  <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="collapsible">September/button>
 +
<div class="content">
 +
  <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 coll = document.getElementsByClassName("collapsible");
 +
var i;
 +
 +
for (i = 0; i < coll.length; i++) {
 +
  coll[i].addEventListener("click", function() {
 +
    this.classList.toggle("active");
 +
    var content = this.nextElementSibling;
 +
    if (content.style.maxHeight){
 +
      content.style.maxHeight = null;
 +
    } else {
 +
      content.style.maxHeight = content.scrollHeight + "px";
 +
    }
 +
  });
 +
}
 +
</script>
  
  
Line 234: Line 267:
 
   margin-top: -150px;
 
   margin-top: -150px;
 
   height: 150px;
 
   height: 150px;
 +
}
 +
 +
.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;
 
}
 
}
  

Revision as of 01:48, 14 October 2018

Home
Team Members Collaborations
Description Design Experiments Notebook InterLab Model Results Demonstrate Improve Attributions
Parts Overview Basic Parts Composite Parts Part Collection
Safety
Human Practices Education & Engagement
Applied Design Entrepreneurship Hardware Measurement Model Plant Software
Judging Form

Notebook

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.