Difference between revisions of "Team:Melbourne/Safety"

Line 4: Line 4:
  
 
<script>
 
<script>
−
var acc = document.getElementsByClassName("accordion");
+
function openCity(evt, cityName) {
−
var i;
+
    // Declare all variables
 +
    var i, tabcontent, tablinks;
  
−
for (i = 0; i < acc.length; i++) {
+
    // Get all elements with class="tabcontent" and hide them
−
    acc[i].addEventListener("click", function() {
+
    tabcontent = document.getElementsByClassName("tabcontent");
−
        /* Toggle between adding and removing the "active" class,
+
    for (i = 0; i < tabcontent.length; i++) {
−
        to highlight the button that controls the panel */
+
        tabcontent[i].style.display = "none";
−
        this.classList.toggle("active");
+
    }
  
−
        /* Toggle between hiding and showing the active panel */
+
    // Get all elements with class="tablinks" and remove the class "active"
−
        var panel = this.nextElementSibling;
+
    tablinks = document.getElementsByClassName("tablinks");
−
        if (panel.style.display === "block") {
+
    for (i = 0; i < tablinks.length; i++) {
−
            panel.style.display = "none";
+
        tablinks[i].className = tablinks[i].className.replace(" active", "");
−
        } else {
+
    }
−
            panel.style.display = "block";
+
 
−
        }
+
    // Show the current tab, and add an "active" class to the link that opened the tab
−
     });
+
    document.getElementById(cityName).style.display = "block";
 +
     evt.currentTarget.className += " active";
 
}
 
}
 
</script>
 
</script>
Line 26: Line 28:
  
 
<style>
 
<style>
−
/* Style the buttons that are used to open and close the accordion panel */
+
/* Style the tab */
−
.accordion {
+
.tab {
−
     background-color: #eee;
+
    float: left;
−
     color: #444;
+
    border: 1px solid #ccc;
−
     cursor: pointer;
+
    background-color: #f1f1f1;
−
     padding: 18px;
+
    width: 30%;
 +
    height: 300px;
 +
}
 +
 
 +
/* Style the buttons that are used to open the tab content */
 +
.tab button {
 +
     display: block;
 +
     background-color: inherit;
 +
     color: black;
 +
     padding: 22px 16px;
 
     width: 100%;
 
     width: 100%;
−
    text-align: left;
 
 
     border: none;
 
     border: none;
 
     outline: none;
 
     outline: none;
−
     transition: 0.4s;
+
    text-align: left;
 +
    cursor: pointer;
 +
     transition: 0.3s;
 +
}
 +
 
 +
/* Change background color of buttons on hover */
 +
.tab button:hover {
 +
    background-color: #ddd;
 
}
 
}
  
−
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+
/* Create an active/current "tab button" class */
−
.active, .accordion:hover {
+
.tab button.active {
 
     background-color: #ccc;
 
     background-color: #ccc;
 
}
 
}
  
−
/* Style the accordion panel. Note: hidden by default */
+
/* Style the tab content */
−
.panel {
+
.tabcontent {
−
     padding: 0 18px;
+
    float: left;
−
     background-color: white;
+
     padding: 0px 12px;
−
     display: none;
+
     border: 1px solid #ccc;
−
     overflow: hidden;
+
     width: 70%;
 +
    border-left: none;
 +
     height: 300px;
 
}
 
}
 
</style>
 
</style>
Line 61: Line 80:
  
 
<body>
 
<body>
−
<br><br><br><br><br><br><br><br><br><br><br><br>
+
<div class="tab">
−
<button class="accordion">Section 1</button>
+
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
−
<div class="panel">
+
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
−
   <p>Lorem ipsum...</p>
+
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
 +
</div>
 +
 
 +
<div id="London" class="tabcontent">
 +
  <h3>London</h3>
 +
   <p>London is the capital city of England.</p>
 
</div>
 
</div>
  
−
<button class="accordion">Section 2</button>
+
<div id="Paris" class="tabcontent">
−
<div class="panel">
+
  <h3>Paris</h3>
−
   <p>Lorem ipsum...</p>
+
   <p>Paris is the capital of France.</p>  
 
</div>
 
</div>
  
−
<button class="accordion">Section 3</button>
+
<div id="Tokyo" class="tabcontent">
−
<div class="panel">
+
  <h3>Tokyo</h3>
−
   <p>Lorem ipsum...</p>
+
   <p>Tokyo is the capital of Japan.</p>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:10, 17 October 2018

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.