diff --git a/main.js b/main.js
index dcbe92fad8db2102da32d084e12b975ca653ac96..fc4452e257200d7e2f2260bc1d7c221b39e50bb7 100644
--- a/main.js
+++ b/main.js
@@ -324,17 +324,9 @@ function updateCss() {
 	let cssStr = editor.getValue();
 	chrome.storage.local.set({ css: cssStr });
 	analyseAll();
-	chrome.tabs.query({ active: true, currentWindow: true },
-		function (tabs) {
-			chrome.tabs.sendMessage(tabs[0].id, { type: 'update', data: false });
-		}
-	);
+	sendMessage({ type: 'update', data: false });
 }
 
-
-
-
-
 $('#onOff').on('click', function () {
 	activateButton = !activateButton;
 	chrome.storage.sync.set({ activate: activateButton }, function () {
@@ -343,13 +335,9 @@ $('#onOff').on('click', function () {
 		} else {
 			$('#onOff').removeClass('active');
 		}
-		chrome.tabs.query({ active: true, currentWindow: true },
-			function (tabs) {
-				chrome.storage.sync.set({ audioI: false });
-				chrome.storage.sync.set({ midiI: false });
-				chrome.tabs.sendMessage(tabs[0].id, { type: 'start', data: activateButton });
-			}
-		);
+		chrome.storage.sync.set({ audioI: false });
+		chrome.storage.sync.set({ midiI: false });
+		sendMessage({ type: 'start', data: activateButton });
 	});
 });
 
@@ -359,12 +347,8 @@ $('#onOff').on('click', function () {
 
 $('.audioI').on('click', function () {
 	audioButton = !audioButton;
-	chrome.storage.sync.set({ audioI: audioButton }, function () {
-	});
-	chrome.tabs.query({ active: true, currentWindow: true },
-		function (tabs) {
-			chrome.tabs.sendMessage(tabs[0].id, { type: 'audio', data: audioButton });
-		});
+	chrome.storage.sync.set({ audioI: audioButton });
+	sendMessage({ type: 'audio', data: audioButton });
 	initUi();
 });
 
@@ -374,12 +358,8 @@ $('.audioI').on('click', function () {
 
 $('.midiI').on('click', function () {
 	midiButton = !midiButton;
-	chrome.storage.sync.set({ midiI: midiButton }, function () {
-	});
-	chrome.tabs.query({ active: true, currentWindow: true },
-		function (tabs) {
-			chrome.tabs.sendMessage(tabs[0].id, { type: 'midi', data: midiButton });
-		});
+	chrome.storage.sync.set({ midiI: midiButton });
+	sendMessage({ type: 'midi', data: midiButton });
 	initUi();
 });
 $(document).on('click', '.icon-tabler-plus', function () {
@@ -415,11 +395,7 @@ $(document).on('click', '#record', function () {
 	else {
 		$('#record').html(recordIcon);
 	}
-	chrome.tabs.query({ active: true, currentWindow: true },
-		function (tabs) {
-			chrome.tabs.sendMessage(tabs[0].id, { type: 'record', data: { bool: record, number: id } });
-		});
-
+	sendMessage({ bool: record, number: id });
 });
 $(document).on('click', '#loopPlay', function () {
 	if ($(this).html().includes('player-play')) {
@@ -431,19 +407,11 @@ $(document).on('click', '#loopPlay', function () {
 
 	}
 	id = $(this).val();
-	chrome.tabs.query({ active: true, currentWindow: true },
-		function (tabs) {
-			chrome.tabs.sendMessage(tabs[0].id, { type: 'playLoop', data: id });
-		}
-	);
+	sendMessage({ type: 'playLoop', data: id });
 });
 $(document).on('click', '#loopReset', function () {
 	id = $(this).val();
-	chrome.tabs.query({ active: true, currentWindow: true },
-		function (tabs) {
-			chrome.tabs.sendMessage(tabs[0].id, { type: 'resetLoop', data: id });
-		}
-	);
+	sendMessage({ type: 'resetLoop', data: id });
 });
 
 
@@ -451,16 +419,12 @@ $('#download').on('click', function () {
 	const filename = 'data.json';
 	chrome.storage.local.get(['parameters'], function (result) {
 		const jsonStr = JSON.stringify([editor.getValue(), result.parameters]);
-
 		let element = document.createElement('a');
 		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));
 		element.setAttribute('download', filename);
-
 		element.style.display = 'none';
 		document.body.appendChild(element);
-
 		element.click();
-
 		document.body.removeChild(element);
 	});
 });
@@ -481,6 +445,17 @@ $('#upload').on('change', function () {
 	this.value = "";
 });
 
+/**
+ * Send message to the content script.
+ * @param {dict} msg 
+ */
+function sendMessage(msg) {
+	chrome.tabs.query({ active: true, currentWindow: true },
+		function (tabs) {
+			chrome.tabs.sendMessage(tabs[0].id, msg);
+		}
+	);
+}
 
 
 /**
@@ -531,8 +506,20 @@ $(document).tooltip({
 	trigger: 'hover'
 });
 $(function () {
+	var icons = {
+		header: "ui-icon-closed",
+		activeHeader: "ui-icon-open"
+	};
 	$("#accordion").accordion({
+		heightStyle: "content",
 		collapsible: true,
-		heightStyle: "content"
+		icons: icons
+	});
+	$("#toggle").button().on("click", function () {
+		if ($("#accordion").accordion("option", "icons")) {
+			$("#accordion").accordion("option", "icons", null);
+		} else {
+			$("#accordion").accordion("option", "icons", icons);
+		}
 	});
 });
\ No newline at end of file
diff --git a/style.css b/style.css
index 026b655d1bea40e406a8058f0fd6443991cf737e..65dad82ac2981de3c609a78022aead619b1c38b5 100644
--- a/style.css
+++ b/style.css
@@ -217,4 +217,16 @@ a#doc {
 
 #parameters td:nth-child(3) {
   max-width: 200px;
-}
\ No newline at end of file
+}
+
+.ui-icon-closed {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpolyline points='6 9 12 15 18 9' /%3E%3C/svg%3E");
+  filter: invert(1);
+  float: right;
+}
+
+.ui-icon-open{
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-x' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' /%3E%3Cline x1='6' y1='6' x2='18' y2='18' /%3E%3C/svg%3E");
+  filter: invert(1);
+  float: right;
+}