diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
index 0e5f2192d0994c43b91a47fd25bff9c69008b20a..cdc9880b3734a8ff070c8008315d34a7c0278006 100644
--- a/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -4,10 +4,14 @@ package Team5.SmartTowns.trails;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.servlet.ModelAndView;
 
+import java.util.ArrayList;
+import java.util.List;
+
 @Controller
 public class TrailsController {
     @GetMapping("/allTrails")
@@ -21,4 +25,14 @@ public class TrailsController {
         map.addAttribute("foo", "bar");
         return "allTrails/allTrails";
     }
+
+    @GetMapping("/allTrails/{id}")
+    public ModelAndView getResultBySearchKey(@PathVariable int id)
+    {
+        List<Trail> trailList= Trail.trails;//results from db
+        ModelAndView mv= new ModelAndView("fragments/allTrailsFrags :: trailSection");
+        mv.addObject("searchList", trailList.get(id-1));
+
+        return mv;
+    }
 }
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index b718322edf0e13dbade9014b60f080ea44ef7cec..f311772cd5bdeb4e7021e68660363560d970c36a 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -30,6 +30,6 @@
 }
 
 .trailInfoBox {
-    opacity: 0;
+    /*opacity: 0;*/
 }
 
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index 2028494c7502ff8a2677f014cb4b355afa88cb90..70a7e5fa47fdd8a8368b626fab7d705937532023 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -11,73 +11,27 @@
 <header>
     <ul class="flexList">
         <li class="listButton" th:each="trail : ${trails}">
-            <a class="listA" th:onclick="'update(' + ${trail.id} + ');'" th:id="'li' + ${trail.id}" th:text="${trail.name}"></a>
+            <a class="listA" th:onclick="'updateOutputTrail('+ ${trail.id} +');'" th:id="'li' + ${trail.id}" th:text="${trail.name}"></a>
         </li>
     </ul>
 </header>
 
 <main>
-    <section class="trailInfoBox" th:each="trail : ${trails}" th:id="${trail.id}">
-        <h1 th:text="${trail.description}"></h1>
-    </section>
-
-
-
+    <section id="trailInfoBox"></section>
 </main>
 
 
 <script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
 <script th:inline="javascript">
-    function fade(element) {
-        var op = 1;  // initial opacity
-        var timer = setInterval(function () {
-            if (op <= 0.1){
-                clearInterval(timer);
-                element.style.display = 'none';
-            }
-            element.style.opacity = op;
-            element.style.filter = 'alpha(opacity=' + op * 100 + ")";
-            op -= op * 0.1;
-        }, 50);
+    function updateOutputTrail(id) {
+        /* Updates the trail being shown on screen to the one requested by ID */
+        $.get("/allTrails/" + id).done(function (fragment) {
+            $("#trailInfoBox").html(fragment)
+        });
     }
 
-    function unfade(element) {
-        var op = 0.1;  // initial opacity
-        element.style.display = 'block';
-        var timer = setInterval(function () {
-            if (op >= 1){
-                clearInterval(timer);
-            }
-            element.style.opacity = op;
-            element.style.filter = 'alpha(opacity=' + op * 100 + ")";
-            op += op * 0.1;
-        }, 10);
-    }
-    async function update(id){
-        await updateTrailInfo(id);
-        selectTrail('li' + id);
-    }
-    async function updateTrailInfo(id){
-        let blocks = document.getElementsByClassName('trailInfoBox');
-        let clicked = document.getElementById(id);
-        let active = null;
-        for (let i = 0; i < blocks.length; i++) {
-            if (blocks[i].style.display === 'block') {
-                active = blocks[i];
-            }
-        }
-        if (active == null) {
-            unfade(clicked)
-            clicked.style.display="block"
-        } else if (active !== clicked) {
-            fade(active);
-            active.style.display="none"
-            unfade(clicked)
-            clicked.style.display="block"
-        }
-
-    }
-    function selectTrail(string) {
+    function updateSelectedTrail(string) {
+        /* Updates the trail bar, so that it highlights the selected trail */
         let listEl = document.getElementsByClassName('listA')
         for (let i = 0; i < listEl.length; i++) {
             listEl[i].classList.remove('selected')
diff --git a/src/main/resources/templates/fragments/allTrailsFrags.html b/src/main/resources/templates/fragments/allTrailsFrags.html
new file mode 100644
index 0000000000000000000000000000000000000000..35f4bf9ef04f3949a61665f7102a517e291d9ac7
--- /dev/null
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
@@ -0,0 +1,3 @@
+<section th:fragment="trailSection" class="trailInfoBox">
+    <h1 th:text="${searchList.description}"></h1>
+</section>
\ No newline at end of file