diff --git a/webapp/src/main/webapp/themes/iph/js/toc.js b/webapp/src/main/webapp/themes/iph/js/toc.js
index d4d746bc..6a400d0f 100644
--- a/webapp/src/main/webapp/themes/iph/js/toc.js
+++ b/webapp/src/main/webapp/themes/iph/js/toc.js
@@ -8,8 +8,13 @@
 			console.log("no complex document or no placeholder");
 			return;
 		}
-		addItemsToTOC(complexDocElement,tocElement)
+		addItemsToTOC(complexDocElement,tocElement);
+
+		collapseAllTOCElements("tocPlaceHolder");
+		//show created TOC
+		tocElement.style.display = "block"; 
 	}
+	
 	function addItemsToTOC(docPart, tocElement){
 		var docPartChilds = docPart.childNodes;
 		for (var i = 0; i < docPartChilds.length; i++){
@@ -17,13 +22,124 @@
 			if ( docPartChild.nodeType === Node.ELEMENT_NODE && docPartChild.classList.contains("documentPart")){
 				var tocElementChild = createTOCItem(docPartChild, tocElement);
 				addItemsToTOC(docPartChild,tocElementChild);
+				addElementControls(tocElementChild);
 			}
 		}
 	}
+	function addElementControls(tocElement){
+		var elementChild = tocElement.querySelector('.tocElement');
+		if (elementChild === null){
+			//no controls need as no childs appear.
+			return;
+		}
+		var nameContainer = tocElement.querySelector('.tocElementName');
+		if (nameContainer === null){
+			console.log("no nameContainer found");
+			return;
+		}
+		if (tocElement.id === null){
+			console.log("no tocElement id found");
+			return;
+		}
+		//var elementSwitchButton = document.createElement("button");
+		//elementSwitchButton.className = "tocElementSwitchButton";
+		
+		var switchImage = document.createElement("img");
+		switchImage.onclick = function() {switchTOCElement(tocElement.id);};
+		switchImage.className = "tocElementSwitchImage";
+		nameContainer.prepend(switchImage);
+		//elementSwitchButton.appendChild(switchImage);
+
+	}
+	
+	function switchTOCElement(id){
+		var tocElement = document.getElementById(id);
+		var elementChild = tocElement.querySelector('.tocElement');
+		if (elementChild.style.display === "none"){
+			expandTOCElementChilds(id);
+			setCollapseImageToElement(id);
+		} else {
+			collapseTOCElementDescendants(id);
+			setExpandImageToElement(id);
+		}
+	}
+	
+	function setCollapseImageToElement(id){
+		var tocElement = document.getElementById(id);
+		var nameContainer = tocElement.querySelector('.tocElementName');
+		if (nameContainer === null){
+			console.log("no nameContainer found");
+			return;
+		}
+	    $.extend(this, urlsBase);
+		var imgElement = nameContainer.firstElementChild;
+		imgElement.src = urlsBase + "/themes/iph/images/save.svg";
+		
+	}
+	
+	function setExpandImageToElement(id){
+		var tocElement = document.getElementById(id);
+		var nameContainer = tocElement.querySelector('.tocElementName');
+		if (nameContainer === null){
+			console.log("no nameContainer found");
+			return;
+		}
+	    $.extend(this, urlsBase);
+		var imgElement = nameContainer.firstElementChild;
+		imgElement.src = urlsBase + "/themes/iph/images/print.svg";
+		
+	}
+	
+	function expandTOCElementChilds(id){
+		var tocElement = document.getElementById(id);
+		var elementChilds = tocElement.querySelectorAll(':scope > .tocElement');
+		for (let i = 0; i < elementChilds.length; i++) {
+			elementChilds[i].style.display = "block";
+			setExpandImageToElement(elementChilds[i].id);
+		}
+	}
+	
+	function expandTOCElementDescendants(id){
+		var tocElement = document.getElementById(id);
+		var elementChilds = tocElement.querySelectorAll('.tocElement');
+		for (let i = 0; i < elementChilds.length; i++) {
+			elementChilds[i].style.display = "block";
+			setExpandImageToElement(elementChilds[i].id);
+		}
+	}
+	
+	function collapseAllTOCElements(placeHolderId){
+		var tocRoot = document.getElementById(placeHolderId);
+		var elementChilds = tocRoot.querySelectorAll('.tocElement');
+		for (let i = 0; i < elementChilds.length; i++) {
+			collapseTOCElementDescendants(elementChilds[i].id);
+			setExpandImageToElement(elementChilds[i].id);
+		}
+	}
+	function expandAllTOCElements(placeHolderId){
+		var tocRoot = document.getElementById(placeHolderId);
+		var elementChilds = tocRoot.querySelectorAll('.tocElement');
+		for (let i = 0; i < elementChilds.length; i++) {
+			expandTOCElementDescendants(elementChilds[i].id);
+			setCollapseImageToElement(elementChilds[i].id);
+		}
+	}
+	
+	function collapseTOCElementDescendants(id){
+		var tocElement = document.getElementById(id);
+		var elementChilds = tocElement.querySelectorAll('.tocElement');
+		for (let i = 0; i < elementChilds.length; i++) {
+			elementChilds[i].style.display = "none";
+			setCollapseImageToElement(elementChilds[i].id);
+		}
+	}
+
 	function createTOCItem(docPart, tocElement){
 		var newTOCElement = document.createElement("div");
 		var newTOCElementName = document.createElement("div");
 		var anchor = docPart.getAttribute('id');
+		var tocElementID = "toc-" + anchor;
+		newTOCElement.id = tocElementID;
 		var docPartButton = docPart.previousElementSibling;
 		var itemName = docPartButton.textContent;
 		var link = document.createElement("a");
diff --git a/webapp/src/main/webapp/themes/iph/templates/page.ftl b/webapp/src/main/webapp/themes/iph/templates/page.ftl
index b534a3de..915f16b6 100644
--- a/webapp/src/main/webapp/themes/iph/templates/page.ftl
+++ b/webapp/src/main/webapp/themes/iph/templates/page.ftl
@@ -7,7 +7,7 @@
     <head>
         <#include "head.ftl">
     </head>
-
+<script>var urlsBase = "${urls.base}";</script>
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
         <#include "identity.ftl">
         <#include "menu.ftl">