commit

static/Location.css

+.container {
+  overflow: hidden;
+}
+
+.filterDiv {
+  float: left;
+  background-color: #2196F3;
+  color: #ffffff;
+  width: 100px;
+  line-height: 100px;
+  text-align: center;
+  margin: 2px;
+  display: none; /* Hidden by default */
+}
+
+.show {
+  display: block;
+}
+
+.btn {
+  border: none;
+  outline: none;
+  padding: 12px 16px;
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: #ddd;
+}
+
+.btn.active {
+  background-color: #666;
+  color: white;
+}

static/scripts/Location.js

+filterSelection("all")
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("filterDiv");
+  if (c == "all") c = "";
+  // Add the Show class
+  for (i = 0; i < x.length; i++) {
+    RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
+  }
+}
+
+// Showing filtered elements
+function AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {
+      element.className += " " + arr2[i];
+    }
+  }
+}
+
+// Removing elements that are not selected
+function RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to current control button
+var btnContainer = document.getElementById("myBtnContainer");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}

templates/Locations.html

+{% extends "main.html" %}
+{% block title %}Locations{% endblock %}
+{% block mainBlock %}
+<div id="myBtnContainer">
+  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
+  <button class="btn" onclick="filterSelection('Wales')"> Wales</button>
+  <button class="btn" onclick="filterSelection('North-England')"> North England</button>
+  <button class="btn" onclick="filterSelection('South-West-England')"> South West England</button>
+  <button class="btn" onclick="filterSelection('Midlands')"> Midlands</button>
+  <button class="btn" onclick="filterSelection('Scotland')"> Scotland</button>
+</div>
+
+<div class="container">
+  <div class="filterDiv Wales">Location 1</div>
+  <div class="filterDiv Wales">Location 2</div>
+  <div class="filterDiv North-England">Location 3</div>
+  <div class="filterDiv North-England">Location 4</div>
+  <div class="filterDiv South-West-England">Location 5</div>
+  <div class="filterDiv South-West-England">Location 6</div>
+  <div class="filterDiv South-West-England">Location 7</div>
+  <div class="filterDiv Midlands">Location 8</div>
+  <div class="filterDiv Midlands">Location 9</div>
+  <div class="filterDiv Scotland">Location 10</div>
+  <div class="filterDiv Scotland">Location 11</div>
+  <div class="filterDiv Scotland">Location 12</div>
+</div>

templates/about.html

 {% extends "main.html" %}
-{% block title %}Map{% endblock %}
+{% block title %}About{% endblock %}
 {% block mainBlock %}
-<header> About Us </header>
+<header> About 1</header>
 <p>text about us.</p>
 {% endblock %}

templates/contact-us.html

 {% extends "main.html" %}
 {% block title %}Map{% endblock %}
 {% block mainBlock %}
-<header> Contact Us </header>
-<p>text about contact info.</p>
+<header> Contact <header> 
+  <p> tact info.</p>
 {% endblock %}