diff --git a/css/collapsemod.css b/css/collapsemod.css
index d156ab4..b125fa2 100644
--- a/css/collapsemod.css
+++ b/css/collapsemod.css
@@ -6,7 +6,7 @@
   }
 
   .module .collapse, .module .collapsing {
-    height: 4rem; /* By default 5 */
+    height: 4.5rem; /* By default 5 */
   }
 
   .module .collapse {
@@ -20,14 +20,14 @@
 
   .read-more {
     position: absolute;
-    top: 0;
+    top: 1.6rem;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 1;
 
     /* 60% is where it should start the transition from transparent to white, increase it if you want to show more of your text*/
-    background-image: linear-gradient(to bottom, transparent 40%, white);
+    background-image: linear-gradient(to bottom, transparent 5%, white);
 
     /* The opacity and transition is just to smooth out the effect */
     opacity: 1;
diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js
index 596a456..998bcda 100644
--- a/js/cesareBrowse.js
+++ b/js/cesareBrowse.js
@@ -832,12 +832,16 @@ function resetFrasi(){
 				if (comments.RapportoCommentoCommentatoreText != null && comments.RapportoCommentoCommentatoreText != "nan"){
 					createModuleCommentatore (collapseCardBody, comments.RapportoCommentoCommentatoreText, "5", id, pos)
 				}
-				if (comments.frammentoNota != null && comments.frammentoNota != "nan"){
-					createModule(collapseCardBody,"Nota: ", comments.frammentoNota, "7", id, pos)
-				}				
-				if (comments.annotazione != null && comments.annotazione != "nan"){
-					createModule(collapseCardBody,"Nota completa: ", comments.annotazione, "6", id, pos)
-				}				
+				if (comments.frammentoNota != null && comments.frammentoNota != "nan" && comments.annotazione != null && comments.annotazione != "nan") {
+					createModuleFrammAnnot(collapseCardBody, comments.frammentoNota, comments.annotazione, "6", id, pos)
+				} else {
+					if (comments.frammentoNota != null && comments.frammentoNota != "nan"){
+						createModule(collapseCardBody,"Nota: ", comments.frammentoNota, "7", id, pos)
+					}				
+					if (comments.annotazione != null && comments.annotazione != "nan"){
+						createModule(collapseCardBody,"Nota completa: ", comments.annotazione, "6", id, pos)
+					}				
+				}
 				if (comments.NotaFonteCitazione != null && comments.NotaFonteCitazione != "nan" && comments.NotaFonteCitazione != ""){
 					createModule(collapseCardBody,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id, pos)
 				}
@@ -981,7 +985,7 @@ function resetFrasi(){
 	      	divModule.append(divNote);
 	      	
 		} else {
-			var divModule = $('<div class="module py-1">');
+			var divModule = $('<div class="py-1">');
 			divModule.append(divContent);
 		}
 		divModule.appendTo(collapse);
@@ -1038,6 +1042,53 @@ function resetFrasi(){
 		divModule.appendTo(collapse);
 	}
 
+	function createModuleFrammAnnot(collapse, testo1, testo2, num, id, pos){
+		var minLength = ($('#displaynote').width() / $('#Test').width() * 2 * 32);
+		var divFrammAnnot = $('<div class="py-1">');
+		var divContent1 = $('<div class="text-muted p-0">');
+		var divContent2 = $('<div class="text-muted p-0">');
+		var uniqueIdMulti1 = 'collapse'+num+'SimpleNote'+id+'_'+pos;
+		var uniqueIdMulti2 = 'collapse'+num+'CompleteNote'+id+'_'+pos;
+		console.log(pos);
+				console.log(uniqueIdMulti1);
+				console.log(uniqueIdMulti2);
+		var divMultiCollapse1 = $('<div class="collapse multi-collapse show text-muted p-0" id="' + uniqueIdMulti1 + '">');
+		var divMultiCollapse2 = $('<div class="collapse multi-collapse text-muted p-0" id="' + uniqueIdMulti2 + '">');
+		var label1 = '<b>Nota / <a href="" data-toggle="collapse" data-target=".multi-collapse" aria-controls="' + uniqueIdMulti1 + ' ' + uniqueIdMulti2 +'">Nota completa</a>: </b>'
+		var label2 = '<b><a href="" data-toggle="collapse" data-target=".multi-collapse" aria-controls="' + uniqueIdMulti1 + ' ' + uniqueIdMulti2 +'">Nota</a> / Nota completa: </b>'
+		var nota1 = '<span class="blog-main-16">'+testo1+'</span>';
+		var nota2 = '<span class="blog-main-16">'+testo2+'</span>';
+
+		divFrammAnnot.append(divMultiCollapse1);
+		divFrammAnnot.append(divMultiCollapse2);
+		divContent1.append(label1 + nota1);
+		divContent2.append(label2 + nota2);
+		
+		if ((testo1.length + 23) > minLength) {
+			var divModule1 = $('<div class="module pb-0">');
+			var divNote1 = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
+			divModule1.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+ '_' + pos +'" role="button"></a>')
+	      	divNote1.append(divContent1)
+			divModule1.append(divNote1);
+	      	divMultiCollapse1.append(divModule1);
+		} else {
+			divMultiCollapse1.append(divContent1);
+		}
+
+		if ((testo2.length + 23) > minLength) {
+			var divModule2 = $('<div class="module pb-0">');
+			var divNote2 = $('<div class="collapse" id="collapse'+num+'Note'+(id + 1)+ '_' + pos +'" aria-expanded="false">')
+			divModule2.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+(id + 1)+ '_' + pos +'" role="button"></a>')			
+			divNote2.append(divContent2);
+			divModule2.append(divNote2);
+	      	divMultiCollapse2.append(divModule2);
+		} else {
+			divMultiCollapse2.append(divContent2);
+		}
+
+		divFrammAnnot.appendTo(collapse);
+	}
+	
 	function hasComments(cid){
 		var id = cid.substr(9);
 		for (var pos in commentsArray){