Difference between revisions of "Team:BostonU/Parts"

Line 38: Line 38:
 
}
 
}
  
 +
div.tab {
 +
    overflow: hidden;
 +
    border: 1px solid #ccc;
 +
    background-color: #f1f1f1;
 +
}
 +
 +
/* Style the buttons inside the tab */
 +
div.tab button {
 +
    background-color: inherit;
 +
    float: left;
 +
    border: none;
 +
    outline: none;
 +
    cursor: pointer;
 +
    padding: 14px 16px;
 +
    transition: 0.3s;
 +
    font-size: 17px;
 +
}
 +
 +
/* Change background color of buttons on hover */
 +
div.tab button:hover {
 +
    background-color: #ddd;
 +
}
 +
 +
/* Create an active/current tablink class */
 +
div.tab button.active {
 +
    background-color: #ccc;
 +
}
 +
 +
/* Style the tab content */
 +
.tabcontent {
 +
    display: none;
 +
    padding: 6px 12px;
 +
    border: 1px solid #ccc;
 +
    border-top: none;
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
Line 49: Line 84:
 
   <p>This is a summary of all the parts we submitted to registry</p>
 
   <p>This is a summary of all the parts we submitted to registry</p>
 
</section>
 
</section>
 +
</div>
 +
<div class="tab">
 +
  <button class="tablinks" onclick="openCity(event, '1st Part')">1st Part</button>
 +
  <button class="tablinks" onclick="openCity(event, '2nd Part')">2nd Part</button>
 +
  <button class="tablinks" onclick="openCity(event, '3rd Part')">3rd Part</button>
 +
</div>
 +
<div id="1st Part" class="tabcontent">
 +
  <p>Description of First submitted part</p>
 +
</div>
 +
<div id="2nd Part" class="tabcontent">
 +
  <p>Description of second submitted part.</p>
 +
</div>
 +
<div id="3rd Part" class="tabcontent">
 +
  <p>Description of third submitted part.</p>
 +
</div>
 +
<script>
 +
function openCity(evt, cityName) {
 +
    var i, tabcontent, tablinks;
 +
    tabcontent = document.getElementsByClassName("tabcontent");
 +
    for (i = 0; i < tabcontent.length; i++) {
 +
        tabcontent[i].style.display = "none";
 +
    }
 +
    tablinks = document.getElementsByClassName("tablinks");
 +
    for (i = 0; i < tablinks.length; i++) {
 +
        tablinks[i].className = tablinks[i].className.replace(" active", "");
 +
    }
 +
    document.getElementById(cityName).style.display = "block";
 +
    evt.currentTarget.className += " active";
 +
}
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:51, 2 July 2017




REGISTRY PARTS



Summary

This is a summary of all the parts we submitted to registry

Description of First submitted part

Description of second submitted part.

Description of third submitted part.