diff --git a/index_4.4_test.html b/index_4.4_test.html
index 6cb733b..b909920 100644
--- a/index_4.4_test.html
+++ b/index_4.4_test.html
@@ -482,36 +482,35 @@
 
 								<div class="tab-content visInfo w-100 d-flex bg-lida-vis" id="vis-TabContent" style="flex-direction: column;">
  									<div class="tab-pane fade show active p-0 bg-lida-vis" id="vis0" role="tabpanel" aria-labelledby="vis0-tab">
-										<div id='displaynote' class="p-2">
+<div id='displaynote' class="p-2">
 										
-<div class="card card-body well well-sm m-1 p-0">
-
-	<div class="d-flex align-content-start flex-nowrap text-muted mt-1">
-  		<div class="p-2">
+<div class="card card-body well well-sm m-1 p-0" id= "CardCommenti">
+	<div class="d-flex align-content-start flex-nowrap text-muted mt-1" id= "VersoCommento">
+  		<div class="p-2" >
   			<b>Inferno</b><i>, Canto I Verso 1 - Dante Alighieri, Convivio IV, xxiii, 9-11</i>
   		</div>
   		<div class="ml-auto p-1 pr-2">
-  											<span class="h6">
-												<button id="collapseBtnNoteX"
-													class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded text-primary px-1 pb-0  show"
-													data-toggle="collapse" data-target="#collapseNoteX"
-													aria-expanded="true" aria-controls="collapseNoteX">
-													<ion-icon name="archive"></ion-icon>
-												</button>
-												<button id="closeNoteX"
-													class="btn btn-sm btn-outline-primary bg-light closeNote border rounded text-primary px-1 pb-0"
-													style="z-index: 1000">
-													<ion-icon name="close-circle"></ion-icon>
-												</button>
-											</span>
-  
+  					<span class="h6">
+						<button id="collapseBtnNoteX"
+								class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded text-primary px-1 pb-0  show"
+								data-toggle="collapse" data-target="#collapseNoteX"
+								aria-expanded="true" aria-controls="collapseNoteX">
+								<ion-icon name="archive"></ion-icon>
+						</button>
+						<button id="closeNoteX"
+								class="btn btn-sm btn-outline-primary bg-light closeNote border rounded text-primary px-1 pb-0"
+								style="z-index: 1000">
+								<ion-icon name="close-circle"></ion-icon>
+						</button>
+					</span>
 		</div>
 	</div>
 
-						<div id="collapseNoteX" class="collapse show"
-							aria-labelledby="headingCX" data-parent="#sortable0">
-							<div class="card-body p-0 mx-1 mb-1 bg-lida11 border rounded"
-								id="claBodyxX1Xx"></div>
+<div id="collapseNoteX" class="collapse show"
+				aria-labelledby="headingCX" data-parent="#sortable0">
+	<div class="card-body p-0 mx-1 mb-1 bg-lida11 border rounded"
+								id="claBodyxX1Xx">
+	</div>
 
 	<div class="d-flex align-content-start flex-wrap text-muted">
 		<div class="p-2"><b>Autore:</b> <a href="http://www.wikidata.org/entity/Q1067" target="_blank"><i>Dante Alighieri</i>, </a></div>
@@ -561,14 +560,9 @@
 			</div>
 		</div>
 	</div>
-
-
-						</div>
-
-
-</div>
-										
-										</div>
+</div> <!-- Fine collapseNoteX -->	
+</div> <!-- Fine card div -->								
+</div> <!-- Fine displaynote div -->
 									</div>
   									<div class="tab-pane fade p-0 bg-lida-vis" id="vis1" role="tabpanel" aria-labelledby="vis1-tab">
 										<div id='displayinfo' class="p-3"><span>Visualizza struttura periodo</span>
diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js
index 407ee43..08a9f5e 100644
--- a/js/cesareBrowse.js
+++ b/js/cesareBrowse.js
@@ -900,138 +900,166 @@ function resetFrasi(){
 				case "3":	cantica = "Paradiso";
 		}
 			
-		var commentArea = $('#displaynote');
+		var commentArea = $('#CardCommenti');
 		commentArea.empty()
-		var spanComment = $('<span />');		
-		var id = cid.substr(9);
-		var nomeAutore = "";
-		var titoloFonte = "";
-		var luogoFonte = "";
-		var commentoCommentatore = [];
-		var urlCommento = "";
-		var esitoCommento = "";
-		var position = 0;
-		var autoreCommento = "";
-
+		var id = cid.substr(9);		
+		var collapseNote;
+		var claBody = $('<div class="card-body p-0 mx-1 mb-1 bg-lida11 border rounded" id="claBodyxX1Xx">');
+		
 		for (var pos in commentsArray){
 			var comments = commentsArray[pos]
 			if (comments.verso == id){
-				spanComment.append('<b>'+cantica+'</b><i>'+", Canto " + getRoman(parcid[2])+" Verso "+ parcid[3]+"</i><br>");
-				if (comments.NomeAutoreCitazione == null){
-					nomeAutore = 'riferimento';
-				}
-				else{
-					nomeAutore = comments.NomeAutoreCitazione;
-				}
-				if (comments.AutoreCitazione != null){
-					spanComment.append('<b>Autore:</b><a href="'+comments.AutoreCitazione+'" target="_blank"> <i>'+nomeAutore+ '</i>, </a>');
-				}else{
-					spanComment.append('<b>Autore:</b> <i>'+nomeAutore+'</i>');
-
-				}
-				if(comments.TitoloFonteCitazione == null){
-					titoloFonte = "riferimento";
-				}else{
-					titoloFonte = comments.TitoloFonteCitazione;
-				}
-				if (comments.FonteCitazione != null){
-					spanComment.append('<b>Fonte:</b> <a href="'+comments.FonteCitazione+'" target="_blank"><i> '+titoloFonte +'</i>, </a>');
-				}else{
-					spanComment.append('<b>Fonte:</b><i> '+titoloFonte +'</i>');
-
-				}
-				if(comments.LuogoFonteCitazione == null){
-					luogoFonte = "riferimento";
-				}else{
-					luogoFonte = comments.LuogoFonteCitazione;
-				}
-				if (comments.URLFonteCitazione != null){
-					spanComment.append('<b>Luogo Fonte:</b><a href="'+comments.URLFonteCitazione+'"target="_blank"<i> ' + luogoFonte+'</i>, </a><br>');
-				}else{
-					spanComment.append('<b>Luogo Fonte:</b><i> ' + luogoFonte+'</i><br>');
-
+				createNoteHeader(commentArea, comments, id, cantica, parcid);			
+				collapseNote = $('<div id="collapseNote"'+id+ 'class="collapse show"'+
+				'aria-labelledby="headingCX" data-parent="#sortable0">');
+				collapseNote.append(claBody);
+				
+				if (comments.TestoFonteCitazione != null && comments.TestoFonteCitazione != "nan"){
+					createModule(commentArea,"Testo della fonte: ", comments.TestoFonteCitazione, "1", id)
 				}
 				if (comments.NaturaRiferimento != null){
-				spanComment.append("<b>Natura Riferimento:</b><i>  " + comments.NaturaRiferimento+"</i><br>");
+					createModule(commentArea,"Tipo Riferimento: ", comments.NaturaRiferimento, "2", id)
 				}
 				if (comments.commentario != null){
-					spanComment.append("<b>Commentario:</b><i> " + comments.commentario+"</i><br>");
+					createModule(commentArea,"Commentatore: ", comments.commentario, "3", id)
 				}		
 				if (comments.RapportoSoggettoOggetto != null){
-					spanComment.append("<b>Rapporto Soggetto/Oggetto: </b><i>" + comments.RapportoSoggettoOggetto+"</i><br>");
+					createModule(commentArea,"Rapporto Testo/Fonte: ", comments.RapportoSoggettoOggetto, "4", id)
 				}
 				if (comments.RapportoCommentoCommentatoreText != null && comments.RapportoCommentoCommentatoreText != "nan"){
-					commentoCommentatore = comments.RapportoCommentoCommentatoreText.split(',');
-					urlCommento = commentoCommentatore[0];
-					position = urlCommento.indexOf("https");
-					urlCommento = urlCommento.substring(position)
-					//urlCommento = urlCommento.replaceAll("'","");
-					urlCommento = urlCommento.replaceAll("'","");
-					//urlCommento = urlCommento.replaceAll(',',"");
-					esitoCommento = commentoCommentatore[3];
-					esitoCommento = esitoCommento.replace("'Rapporto': ","")
-					//esitoCommento = esitoCommento.replaceAll('"',"");
-					esitoCommento = esitoCommento.replaceAll("'","");
-					esitoCommento = esitoCommento.replaceAll('}',"");
-					autoreCommento = commentoCommentatore[1];
-					autoreCommento = autoreCommento.replace(" 'Autore':","")
-					autoreCommento = autoreCommento.replaceAll("'","");
-					if (autoreCommento == ""){
-						autoreCommento = "Commento"
-					}
-					if (esitoCommento == ""){
-						esitoCommento = "Rapporto nullo"
-					}
-					if(urlCommento == ""){
-						spanComment.append('<b>Rapporto Commento/Commentatore: [</b>Commento nullo, '+esitoCommento+'] <br>');				
-					}else{
-						spanComment.append('<b>Rapporto Commento/Commentatore: [</b><a href="'+urlCommento+'"target="_blank"<i>'+ autoreCommento +'</i></a>, '+esitoCommento+'] <br>');
-					}
+					createModuleCommentatore (commentArea, comments.RapportoCommentoCommentatoreText, "5", id)
 				}
+								
 				if (comments.annotazione != null && comments.annotazione != "nan"){
-					var spanForm = $('<form />');
-					spanComment.append(spanForm);
-					var spanDiv = $('<div />');
-					spanDiv.attr('class', ' form-group pt-2');
-					spanForm.append(spanDiv);
-					spanDiv.append('<label for="comment"><b>Annotazione:</b></label>');
-					spanDiv.append('<textarea readonly class="form-control" rows="2" id="annotazione"+comments.verso name="text">'+comments.annotazione+'</textarea>');
-				
+					createModule(commentArea,"Annotazione: ", comments.annotazione, "6", id)
+				}
 				if (comments.frammentoNota != null && comments.frammentoNota != "nan"){
-					var spanForm = $('<form />');
-					spanComment.append(spanForm);
-					var spanDiv = $('<div />');
-					spanDiv.attr('class', ' form-group');
-					spanForm.append(spanDiv);
-					spanDiv.append('<label for="comment"><b>Frammento Nota:</b></label>');
-					spanDiv.append('<textarea readonly class="form-control" rows="2" id="frammentoNota"+comments.verso name="text">'+comments.frammentoNota+'</textarea>');
-				}
-				if (comments.TestoFonteCitazione != null && comments.TestoFonteCitazione != "nan"){
-					var spanForm = $('<form />');
-					spanComment.append(spanForm);
-					var spanDiv = $('<div />');
-					spanDiv.attr('class', ' form-group');
-					spanForm.append(spanDiv);
-					spanDiv.append('<label for="comment"><b>Testo Fonte:</b></label>');
-					spanDiv.append('<textarea readonly class="form-control" rows="2" id="TestoFonteCitazione"+comments.verso name="text">'+comments.TestoFonteCitazione+'</textarea>');
+					createModule(commentArea,"Nota: ", comments.frammentoNota, "7", id)
 				}
+				
 				if (comments.NotaFonteCitazione != null && comments.NotaFonteCitazione != "nan" && comments.NotaFonteCitazione != ""){
-					var spanForm = $('<form />');
-					spanComment.append(spanForm);
-					var spanDiv = $('<div />');
-					spanDiv.attr('class', ' form-group');
-					spanForm.append(spanDiv);
-					spanDiv.append('<label for="comment"><b>Nota Fonte:</b></label>');
-					spanDiv.append('<textarea readonly class="form-control" rows="2" id="NotaFonteCitazione"+comments.verso name="text">'+comments.NotaFonteCitazione+'</textarea>');
+					createModule(commentArea,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id)
 				}
-			}
-			spanComment.append('<hr class="pt-0 center text-dark bg-dark" style="width: 35%;">');
-
+				commentArea.append('<hr class="pt-0 center text-dark bg-dark" style="width: 100%;">');
 			}
 		}		
-		spanComment.appendTo(commentArea);
 		$('#tab-list #vis0-tab').tab('show')
 	})
+	
+	function createNoteHeader(headerDiv, comments, id, cantica, parcid){
+		var nomeAutore = "";
+		var titoloFonte = "";
+		var luogoFonte = "";
+		var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted mt-1" id= commentoVerso' + id + ' >')
+		var rigaNota = $('<div class="p-2" >');
+		var spanButtons = $('<span class="h6">');
+		var buttons = $('<div class="ml-auto p-1 pr-2">')
+		var collapseButton = $('<button id="collapseBtnNote'+id+'"'+
+				'class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded text-primary px-1 pb-0  show"'+
+				'data-toggle="collapse" data-target="#collapseNote'+id+'"'+
+				'aria-expanded="true" aria-controls="collapseNote'+id+'">'+
+				'<ion-icon name="archive"></ion-icon>');
+		var closeButton = $('<button id="closeNote'+id+'"'+
+				'class="btn btn-sm btn-outline-primary bg-light closeNote border rounded text-primary px-1 pb-0"'+
+				'style="z-index: 1000">'+
+				'<ion-icon name="close-circle"></ion-icon>');
+		
+		rigaNota.append('<b>' + cantica + '</b><i>' + ", Canto " + getRoman(parcid[2]) + " Verso " + parcid[3] + "</i> - ");
+		collapseButton.appendTo(spanButtons);
+		closeButton.appendTo(spanButtons);
+		spanButtons.appendTo(buttons)
+		
+		if (comments.NomeAutoreCitazione == null) {
+			nomeAutore = 'riferimento';
+		}
+		else {
+			nomeAutore = comments.NomeAutoreCitazione;
+		}
+		if (comments.AutoreCitazione != null) {
+			rigaNota.append('<b>Autore della fonte:</b><a href="' + comments.AutoreCitazione + '" target="_blank"> <i>' + nomeAutore + '</i>, </a>');
+		} else {
+			rigaNota.append('<b>Autore della fonte:</b> <i>' + nomeAutore + '</i>');
+		}
+		if (comments.TitoloFonteCitazione == null) {
+			titoloFonte = "riferimento";
+		} else {
+			titoloFonte = comments.TitoloFonteCitazione;
+		}
+		if (comments.FonteCitazione != null) {
+			rigaNota.append('<b>Fonte:</b> <a href="' + comments.FonteCitazione + '" target="_blank"><i> ' + titoloFonte + '</i>, </a>');
+		} else {
+			rigaNota.append('<b>Fonte:</b><i> ' + titoloFonte + '</i>');
+		}
+		if (comments.LuogoFonteCitazione == null) {
+			luogoFonte = "riferimento";
+		} else {
+			luogoFonte = comments.LuogoFonteCitazione;
+		}
+		if (comments.URLFonteCitazione != null) {
+			rigaNota.append('<b>Coordinate della Fonte:</b><a href="' + comments.URLFonteCitazione + '"target="_blank"<i> ' + luogoFonte + '</i>, </a><br>');
+		} else {
+			rigaNota.append('<b>Coordinate della Fonte:</b><i> ' + luogoFonte + '</i><br>');
+
+		}
+		rigaNota.appendTo(commentHeader);
+		buttons.appendTo(commentHeader);
+
+		commentHeader.appendTo(headerDiv);
+	}
+	
+	function createModule(commentArea,label, testo, num, id){
+		var divModule = $('<div class="module pb-0">');
+		var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+'" aria-expanded="false">')
+		var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
+		var divTesto = $('<div class="p-2">')
+		var nota = '<b>'+label+'</b>'+testo;
+		divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+'" role="button"></a>')
+      	divTesto.append(nota);
+      	divContent.append(divTesto);
+      	divNote.append(divContent)
+      	divModule.append(divNote);
+      	divModule.appendTo(commentArea);
+	}
+	function createModuleCommentatore(commentArea, commento, num, id){
+		var commentoCommentatore = commento.split(',');
+		var divModule = $('<div class="module pb-0">');
+		var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+'" aria-expanded="false">')
+		//var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+'" aria-expanded="false">')
+
+		var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
+		var divTesto = $('<div class="p-2">')
+		var nota;
+		var urlCommento = commentoCommentatore[0];
+		var position = urlCommento.indexOf("https");
+		urlCommento = urlCommento.substring(position)
+		urlCommento = urlCommento.replaceAll("'", "");
+		var esitoCommento = commentoCommentatore[3];
+		esitoCommento = esitoCommento.replace("'Rapporto': ", "")
+		esitoCommento = esitoCommento.replaceAll("'", "");
+		esitoCommento = esitoCommento.replaceAll('}', "");
+		var autoreCommento = commentoCommentatore[1];
+		autoreCommento = autoreCommento.replace(" 'Autore':", "")
+		autoreCommento = autoreCommento.replaceAll("'", "");
+		if (autoreCommento == "") {
+			autoreCommento = "Commento"
+		}
+		if (esitoCommento == "") {
+			esitoCommento = "Rapporto nullo"
+		}
+		if (urlCommento == "") {
+			nota = '<b>Rapporto Commento/Commentatore: [</b>Commento nullo, '+esitoCommento+']</b><br>';
+		} else {
+			nota = '<b>Rapporto Commento/Commentatore: [</b><a href="'+urlCommento+'"target="_blank"<i>' + autoreCommento+ '</i></a>, ' + esitoCommento + ']</b><br>';
+		}
+			
+		divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+'" role="button"></a>')
+      	divTesto.append(nota);
+
+      	divContent.append(divTesto);
+      	divNote.append(divContent)
+      	divModule.append(divNote);
+      	divModule.appendTo(commentArea);
+	}
 
 	function hasComments(cid){