developer - better mark clickable items

Author: hynekkar

_sass/developer.scss

@@ -12,8 +12,16 @@ th, td {
 	border: 1px solid black; 
 	padding: 8px; 
 	text-align: left; 
-	}
-	
+	}	
 .hidden {
 	display: none;
-	}
+	}
+.clickable {
+    cursor: pointer;
+	padding: 0.2em;
+  }
+.clickable:hover {
+	color: #D3163C;
+	background-color: #CCCCCC;
+	padding: 0.2em;
+  }

developer.html

@@ -11,11 +11,10 @@
 	  <p>The architecture of the ipfixprobe can be described by the following diagram:</p>
 	  <img src="/images/ipfixprobe_architecture.jpg" style = "width: 100%;">
       <p>Process plugin can export data. Export format of each plugin is described in this section</p>
-      <div class="text editable" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
+      <div class="text editable"  style="display: flex;flex-direction: column;justify-content: center;align-items: left;">
       {% for export_table in sorted_developers  %} 
       <hr>
-      <p class="post-details"></p>
-      <h1 id = "{{export_table.title}}" >{{export_table.title}}</h1>
+      <h1 class="clickable" id = "{{export_table.title}}">{{export_table.title}}</h1>
 	  {% assign textId = export_table.title | append: "_text" %}
       <p id = "{{textId}}" class = "hidden">{{export_table.description}}</p>
 	  {% assign tableId = export_table.title | append: "_table" %}
@@ -47,7 +46,7 @@ <h1 id = "{{export_table.title}}" >{{export_table.title}}</h1>
 
 <script>
   document.addEventListener("DOMContentLoaded", function () {
-    document.querySelectorAll("h1").forEach(function (toggleButton) {
+    document.querySelectorAll(".clickable").forEach(function (toggleButton) {
       const description = document.getElementById(toggleButton.id + "_text");
       const table = document.getElementById(toggleButton.id + "_table");