diff --git a/about.html b/about.html
index f01f88b786db7373effb96b476d3a98f09c72d93..5fba2d3e322db6f572c005f2bea13a09a5464efa 100644
--- a/about.html
+++ b/about.html
@@ -11,6 +11,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<script src="includeHTML.js"></script>
+<script src="sidebar_functions.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
diff --git a/example1.html b/example1.html
index 442e07f079bb4f9d78312d6b8033a1b4008de946..dd2bb15c4ec741b2b0fd6f78fda68482688d9665 100644
--- a/example1.html
+++ b/example1.html
@@ -11,6 +11,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<script src="includeHTML.js"></script>
+<script src="sidebar_functions.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
diff --git a/example2.html b/example2.html
index c72e1da8c2742b43631e541b1767cb045db8f14f..88e2ed28617e37f4a3a09238093456148ff9ee2d 100644
--- a/example2.html
+++ b/example2.html
@@ -11,6 +11,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<script src="includeHTML.js"></script>
+<script src="sidebar_functions.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
diff --git a/example3.html b/example3.html
index b9beeb0792763986a880fdb58df934ad1f3097ca..b7ded1a9ed1a8096ca063afcb22eaf4d8da74947 100644
--- a/example3.html
+++ b/example3.html
@@ -11,6 +11,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<script src="includeHTML.js"></script>
+<script src="sidebar_functions.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
diff --git a/index.html b/index.html
index f8c434b6e3376881bf797e46bf3e1a1c34bbfc45..cb2c158fa71a27d03f19b5b39d6e116890ce3d90 100644
--- a/index.html
+++ b/index.html
@@ -11,11 +11,13 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<script src="includeHTML.js"></script>
+<script src="sidebar_functions.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
+<!-- Sidebar/menu -->
<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
diff --git a/qim_repository_template.html b/qim_repository_template.html
index c5ef289981bcd73d1694243920a50c853bc8bdcf..535ed87d981d8eb0bfb6e08c04bd9b6e7d8cd8c6 100644
--- a/qim_repository_template.html
+++ b/qim_repository_template.html
@@ -11,6 +11,7 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<script src="includeHTML.js"></script>
+<script src="sidebar_functions.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
diff --git a/sidebar.html b/sidebar.html
index e84d7dfc17bc02262ecb5383f51c6acd6cad1b7d..79507e28d7be0b8ff5283d52f71648269248b6ce 100644
--- a/sidebar.html
+++ b/sidebar.html
@@ -21,17 +21,3 @@
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
-
-
-<script>
-// Script to open and close sidebar
-function w3_open() {
- document.getElementById("mySidebar").style.display = "block";
- document.getElementById("myOverlay").style.display = "block";
-}
-
-function w3_close() {
- document.getElementById("mySidebar").style.display = "none";
- document.getElementById("myOverlay").style.display = "none";
-}
-</script>
diff --git a/sidebar_functions.js b/sidebar_functions.js
new file mode 100644
index 0000000000000000000000000000000000000000..a0221880fad779df1f21c852cd341e55a31a7ef1
--- /dev/null
+++ b/sidebar_functions.js
@@ -0,0 +1,10 @@
+// Script to open and close sidebar
+function w3_open() {
+ document.getElementById("mySidebar").style.display = "block";
+ document.getElementById("myOverlay").style.display = "block";
+};
+
+function w3_close() {
+ document.getElementById("mySidebar").style.display = "none";
+ document.getElementById("myOverlay").style.display = "none";
+};