Sezione a "comparsa"
Autor: Mirko C.
Visited 2116,
Followers 1,
Udostępniony 0
Qualcuna sa come inserire nel sito una "sezione a comparsa tipo questa" ?
http://www.agenziaentrate.gov.it/wps/content/Nsilib/Nsi/Professionisti/Comunicazioni/
Cliccando sul titolo SERVIZI DI COMUNICAZIONI, viene visualizzato una casella di testo.
Posted on the
<div><p>a vederlo direi che è l'<b>accordion</b></p><p>qui trovi delle info:</p><p><a href="https://www.w3schools.com/howto/howto_js_accordion.asp" target="_blank" rel="nofollow">https://www.w3schools.com/howto/howto_js_accordion.asp
oppure dagli amici del cucuzzolo:</p><p>è fatto con la 12 (io non l'ho provato con la 14)</p><p><a href="http://quellidelcucuzzolo.blogspot.it/2016/04/effetto-accordion-oggetti-website-x5.html" target="_blank" rel="nofollow">http://quellidelcucuzzolo.blogspot.it/2016/04/effetto-accordion-oggetti-website-x5.html
e qui l'esempio:</p><p><a href="http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/" target="_blank" rel="nofollow">http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/
a vederlo direi che è l'accordion
qui trovi delle info:
https://www.w3schools.com/howto/howto_js_accordion.asp
oppure dagli amici del cucuzzolo:
è fatto con la 12 (io non l'ho provato con la 14)
http://quellidelcucuzzolo.blogspot.it/2016/04/effetto-accordion-oggetti-website-x5.html
e qui l'esempio:
http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/
Autor
GRazie mille
Autor
Provato sulla 14 e funziona alla grande...
Per mio promemoria, e se può tornare utile a qualcuno, ho personalizzato il codice in questo modo:
<script src="js/jquery-ui-effect.min.js"></script>
<script>
/* ==============================================================
Accordion Object: versione base
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
$(document).ready(function() {
$("div[id^='msacc']").parent().addClass("msaccordion");
$(".msaccordion div[id^='imCellStyle_'], .msaccordion div[id^='imCellStyleDescription']").css("display", "none");
$(".msaccordion div[id^='imCellStyleTitle_']").each(function() {
$(this).prepend("<span class='symFaq'>+       </span>"); //simbolo grafico pannello chiuso
$(this).parent().css("min-height", $(this).outerHeight(true));
});
$(".msaccordion div[id^='imCellStyleTitle_']").click(function() {
var $this = $(this);
if ($this.next().is(":visible")) {
setTimeout(function() {
$this.find("span").html("+      "); //simbolo grafico pannello chiuso
}, 500);
} else {
$this.find("span").html("–     "); //simbolo grafico pannello aperto
}
$this.nextAll().toggle("blind", 500); //effetti UI consigliati: blind, drop, fade, slide
});
});
</script>
Così: rispetto al codice originale, NON varia il colore impostato per il titolo, ed ho aumentato lo spazio tra il segno + ed il testo del titolo
ottimo, chiudi pure il post con corretto , se ttto ok...