diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js
index 0788e56..b041cf1 100644
--- a/js/cesareBrowse.js
+++ b/js/cesareBrowse.js
@@ -226,20 +226,36 @@ $(" ."+formaClass).hover(function(idx, element) {
 		}
 	});
 
+	jQuery(document).delegate(' .espandiContesto', 'click', function(e) {
+		var cid  = $(this).attr('id');
+		var parcid=cid.split('_');
+		cantoDisplayed = parcid[0]+"_"+parcid[2]
+		
+		if ( !(loadedCanti.has(cantoDisplayed))){
+			
+			if(parcid[0].includes('Inferno'))
+				showCanto(formeprima, '1',parcid[2])
+			if(parcid[0].includes('Purgatorio'))
+				showCanto(formeseconda, '2',parcid[2])
+			if(parcid[0].includes('Paradiso'))
+				showCanto(formeterza, '3',parcid[2])
+			loadedCanti.add(cantoDisplayed)
+		}
+		cantoDisplayed = "#"+cantoDisplayed
+
+		$(cantoDisplayed).attr('style', 'display: d-flex;');
+		$("#vistaFrasi").css("display", "none");	
+		elencoFrasiDisplayed = false;				
+
+	});
 /*
  * Costruzione e visualizzazione del risultato in frasi.
 */
 	jQuery(document).delegate(' .lista-risultati', 'click', function(e) {
 			var elementoLista;
-			var verso = ""; 
 			var numeroVerso;
-			/*var versi = [];
-			var tuttiversi = [];
-			var canti = [];*/
-			var testo;
 			var canto;
 			var numeroCantica;
-			var versoCorrente;
 			
 			if (elencoFrasiDisplayed){
 				elencoFrasiDisplayed = false;				
@@ -252,7 +268,6 @@ $(" ."+formaClass).hover(function(idx, element) {
 			
 			$(this).attr("style", "background-color: #3da5f4")
 
-
 			elencoFrasiDisplayed = true;
 			
 			if (!queryExecuted){
@@ -269,21 +284,14 @@ $(" ."+formaClass).hover(function(idx, element) {
 			numeroCantica = elementoLista[0].cantica;
 			
 			var elencoRisutati = $("#vistaFrasi");
-			elencoRisutati.empty();			
-			var titoloRisultati = $('<h2 class="titolo-canto pb-2" />')
-			var titoloCantica = $('<h3 class="titolo-canto pb-2" />')
-			titoloCantica.attr("style", "color: DarkBlue")
+			//var titoloRisultati = $('<h2 class="titolo-canto pb-2" />')
+			
 
-			var titoloCanto = $('<h4 class="titolo-canto pb-2" />')
-			titoloCanto.attr("style", "color: DodgerBlue")
-
-			//titoloRisultati.append("Elenco frasi completo per la query : xxx");
-			titoloCantica.append(getCantica(numeroCantica));
-			titoloCanto.append("Canto "+canto);
-
-			titoloRisultati.appendTo(elencoRisutati);			
-			titoloCantica.appendTo(elencoRisutati);			
-			titoloCanto.appendTo(elencoRisutati);			
+			elencoRisutati.empty();	
+					
+			var elencoVersi = $('<h5 class="titolo-canto" />')			
+			elencoVersi.append("<cite style='color:DarkBlue'>"+ (getCantica(numeroCantica)+" canto "+canto+"</cite>"));
+			elencoRisutati.append(elencoVersi)
 
 			$(cantoDisplayed).css("display", "none");
 
@@ -291,82 +299,66 @@ $(" ."+formaClass).hover(function(idx, element) {
 				elementoLista = getFormaContext(parseInt(risultato))
 				numeroVerso = elementoLista[0].verso;
 				if (elementoLista[0].cantica != numeroCantica){
-					numeroCantica = elementoLista[0].cantica;
-					var titoloCantica = $('<h3 class="titolo-canto pb-2" />')
-					titoloCantica.attr("style", "color: DarkBlue")
-
-					titoloCantica.append(getCantica(numeroCantica));
-
-					titoloCantica.appendTo(elencoRisutati);			
-
-					/*canti.push(versi)
-					tuttiversi.push(canti);
-					versi = [];	
-					canti = [];	*/
-					canto = elementoLista[0].canto;	
-					var titoloCanto = $('<h4 class="titolo-canto pb-2" />')
-					titoloCanto.attr("style", "color: DodgerBlue")
-
-					titoloCanto.append("Canto "+canto);
-					titoloCanto.appendTo(elencoRisutati);			
-
+					numeroCantica = elementoLista[0].cantica;	
+					canto = elementoLista[0].canto;		
 				}
-				verso += numeroVerso+ " " + elementoLista[0].testo + " ";
+
+				var divVerso = createDivVersoGeneric(elementoLista[0].cantica, numeroVerso, elementoLista[0].canto)
+				
+				appendForma(elementoLista[0],divVerso)			
+								
 				for (i=1;i < elementoLista.length;i++){
 
 					if (elementoLista[i].canto == canto){
 						if (elementoLista[i].verso == numeroVerso){
-							if (elementoLista[i].posizione == risultato){
-								verso += "<span style='color:red'>"+elementoLista[i].testo + " "+"</span >"
-							}else{
-								verso += elementoLista[i].testo + " " 
+							var spanVerso = appendForma(elementoLista[i],divVerso)
+								
+							if (elementoLista[i].posizione == risultato){							
+								//verso += "<span style='color:red'>"+elementoLista[i].testo + " "+"</span >"
+								//spanVerso.attr("style", "color: red")
 							}
 						}else{
-							//versi.push(verso)
-							var elencoVersi = $('<h5 class="titolo-canto pb-2" />')
-							elencoVersi.attr("style", "line-height: 0.5em")
-							versoCorrente = elencoVersi;
-							elencoVersi.append(verso)
+							var elencoVersi = $('<h5 class="titolo-canto" />')
+							elencoVersi.append(divVerso);
 							elencoVersi.appendTo(elencoRisutati);			
-
-							verso = "";
 							numeroVerso = elementoLista[i].verso;
-							verso += numeroVerso+ " " + elementoLista[i].testo  + " " ;
+							var divVerso = createDivVersoGeneric(elementoLista[0].cantica, numeroVerso, elementoLista[0].canto)
+							appendForma(elementoLista[i],divVerso)
 						}
 					}else{
-						//canti.push(versi)	
-						//versi = [];
 						canto = elementoLista[i].canto;
-						var titoloCanto = $('<h4 class="titolo-canto pb-2" />')
-						titoloCanto.attr("style", "color: DodgerBlue")
+						elencoVersi.append("<cite style='color:DarkBlue'>"+ (getCantica(numeroCantica)+" canto "+canto+"</cite>"));
 
-						titoloCanto.append("Canto "+canto);
-						titoloCanto.appendTo(elencoRisutati);
 					}
 				} 
-				//versoCorrente.attr("style", "color: red")
 				canto = elementoLista[i-1].canto;
-				//versi.push(verso);
-				var elencoVersi = $('<h5 class="titolo-canto pb-2" />')
-				elencoVersi.attr("style", "line-height: 0.5em")
-				elencoVersi.append(verso+"<br><br>")
-				elencoVersi.append("<br><br>")
+				var spanBadgeContext = $('<span />');				
+				var contextIcon = '<ion-icon name="expand"></ion-icon>';
+				spanBadgeContext.attr('class', 'badge badge-primary badge-pill mx-2 espandiContesto');
+				spanBadgeContext.attr('id', getCantica(numeroCantica)+"Canto_Nik_"+canto+"_"+elementoLista[i-1].posizione);
+				spanBadgeContext.append(contextIcon)
+				divVerso.append("<br>")
+
+				spanBadgeContext.appendTo(divVerso);
+				elencoVersi.append(divVerso)
+				elencoVersi.append("<br>")
 
 				elencoVersi.appendTo(elencoRisutati);
-
-				verso = "";				
-				console.log('risultato '+risultato + " verso "+elementoLista[0].verso + " canto "+elementoLista[0].canto)
 			}
-			/*canti.push(versi)
-			tuttiversi.push(canti);*/
 			$("#vistaFrasi").attr('style', 'display: d-flex;');
+			
 	});
+	
+	function appendForma(elementoLista,divVerso) {
+		return createSpanFormeNew(elementoLista.testo, elementoLista.catg, elementoLista.posizione, 
+								elementoLista.periodo, elementoLista.funzperiodo, divVerso)
+	}
 
 	jQuery(document).delegate('.navig-canto', 'click', function(e) {
 		resetFrasi()
 		
 		elencoFrasiDisplayed = false;				
-		$(cantoDisplayed).attr('style', 'display: d-flex;');
+		//$(cantoDisplayed).attr('style', 'display: d-flex;');
 		$("#vistaFrasi").css("display", "none");
 		var listaRisultati = $('.lista-risultati');
 		listaRisultati.attr("style", "background-color: ##007bff")
@@ -688,6 +680,15 @@ $(" ."+formaClass).hover(function(idx, element) {
 	}
 	function createDivVersoNew(cantica, num, canto) {
 		
+			var elementoverso = createDivVersoGeneric(cantica, num, canto)
+			
+			elementoverso.appendTo('#' + cantica + canto)
+			return elementoverso
+
+	}
+	
+	function createDivVersoGeneric(cantica, num, canto) {
+		
 			var elementoverso = $('<p />')
 			var spannum=$('<span />')
 			spannum.append(num + ". ")
@@ -700,9 +701,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 
 			elementoverso.attr('id', cantica + "_" + canto + "_" + num)
 			
-			elementoverso.appendTo('#' + cantica + canto)
 			return elementoverso
-
 	}