|
|
| Line 103: |
Line 103: |
| | from {opacity: 0;} | | from {opacity: 0;} |
| | to {opacity: 1;} | | to {opacity: 1;} |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Style the vertical tab */
| |
| − | .tab_vertical {
| |
| − | float: left;
| |
| − | border: 1px solid #ccc;
| |
| − | background-color: #f1f1f1;
| |
| − | width: 12%;
| |
| − | min-height: 400px;
| |
| − | height: 500px;
| |
| − | overflow-y: auto;
| |
| − | }
| |
| − |
| |
| − | /* Style the buttons inside the tab */
| |
| − | .tab_vertical button {
| |
| − | display: block;
| |
| − | background-color: inherit;
| |
| − | color: black;
| |
| − | padding: 15px 12px;
| |
| − | width: 100%;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | text-align: left;
| |
| − | cursor: pointer;
| |
| − | transition: 0.3s;
| |
| − | font-size: 17px;
| |
| − | }
| |
| − |
| |
| − | /* Change background color of buttons on hover */
| |
| − | .tab_vertical button:hover {
| |
| − | background-color: #ddd;
| |
| − | }
| |
| − |
| |
| − | /* Create an active/current "tab button" class */
| |
| − | .tab_vertical button.active {
| |
| − | background-color: #ccc;
| |
| − | }
| |
| − |
| |
| − | /* Style the tab content */
| |
| − | .tabcontent_vertical {
| |
| − | float: left;
| |
| − | padding: 0 1%;
| |
| − | width: 85%;
| |
| − | border: none;
| |
| − | min-height: 400px;
| |
| | } | | } |
| | | | |
| Line 176: |
Line 129: |
| | | | |
| | <div id="Protocols" class="tabcontent"> | | <div id="Protocols" class="tabcontent"> |
| − | <div class="tab_vertical"> | + | // put in PDF here |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol1')">Protocol 1</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol2')">Protocol 2</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol3')">Protocol 3</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol4')">Protocol 4</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol5')">Protocol 5</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol6')">Protocol 6</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol7')">Protocol 7</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol8')">Protocol 8</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol9')">Protocol 9</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol9')">Protocol 10</button>
| + | |
| − | <button class="tablinks" onclick="openCity(event, 'Protocol9')">Protocol 11</button>
| + | |
| − | </div>
| + | |
| | | | |
| − | <div id="Protocol1" class="tabcontent_vertical">
| |
| − | <h2>Protocol 1</h2>
| |
| − | <p>Add your protocols here.</p>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol2" class="tabcontent_vertical">
| |
| − | <h2>Protocol 2</h2>
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol3" class="tabcontent_vertical">
| |
| − | <h2>Protocol 3</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol4" class="tabcontent_vertical">
| |
| − | <h2>Protocol 4</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol5" class="tabcontent_vertical">
| |
| − | <h2>Protocol 5</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol6" class="tabcontent_vertical">
| |
| − | <h2>Protocol 6</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol7" class="tabcontent_vertical">
| |
| − | <h2>Protocol 7</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol8" class="tabcontent_vertical">
| |
| − | <h2>Protocol 8</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol9" class="tabcontent_vertical">
| |
| − | <h2>Protocol 9</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol10" class="tabcontent_vertical">
| |
| − | <h2>Protocol 10</h2>
| |
| − | </div>
| |
| − |
| |
| − | <div id="Protocol11" class="tabcontent_vertical">
| |
| − | <h2>Protocol 11</h2>
| |
| − | </div>
| |
| | | | |
| | </div> | | </div> |
| Line 240: |
Line 136: |
| | <div id="June" class="tabcontent"> | | <div id="June" class="tabcontent"> |
| | <h2>June</h2> | | <h2>June</h2> |
| − | <p>We had fun!!!</p> | + | <p>PDF here</p> |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| | </div> | | </div> |
| | | | |
| | <div id="July" class="tabcontent"> | | <div id="July" class="tabcontent"> |
| | <h2>July</h2> | | <h2>July</h2> |
| − | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| | </div> | | </div> |
| | | | |
| | <div id="August" class="tabcontent"> | | <div id="August" class="tabcontent"> |
| | <h2>August</h2> | | <h2>August</h2> |
| − | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| | </div> | | </div> |
| | | | |
| | <div id="September" class="tabcontent"> | | <div id="September" class="tabcontent"> |
| | <h2>September</h2> | | <h2>September</h2> |
| − | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| | </div> | | </div> |
| | | | |
| | <div id="October" class="tabcontent"> | | <div id="October" class="tabcontent"> |
| | <h2>October</h2> | | <h2>October</h2> |
| − | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| | </div> | | </div> |
| | | | |
| Line 283: |
Line 179: |
| | } | | } |
| | | | |
| − | function openCity(evt, cityName) {
| |
| − | var i, tabcontent_vertical, tablinks;
| |
| − | tabcontent_vertical = document.getElementsByClassName("tabcontent_vertical");
| |
| − | for (i = 0; i < tabcontent_vertical.length; i++) {
| |
| − | tabcontent_vertical[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> | | </script> |
| | </div> | | </div> |
