Accordion Menu

In questa lezione realizzeremo un Accordion Menu in JavaScript. Un Accordion Menu è un componente interattivo che consente di organizzare e presentare informazioni in modo chiaro e ordinato, con la possibilità di espandere o contrarre sezioni specifiche.

Durante questa lezione, esploreremo passo dopo passo come strutturare il nostro menu nell’HTML, applicare stili accattivanti con il CSS e implementare la logica interattiva con il JavaScript. Impareremo come gestire gli eventi di clic, aprire e chiudere sezioni in modo dinamico e migliorare l’esperienza utente con transizioni fluide e icone dinamiche.

Se siete pronti a scoprire il mondo degli Accordion Menu e ad arricchire le vostre competenze di sviluppo web, iniziamo questa emozionante avventura insieme!

Innanzitutto ecco il risultato di ciò che vogliamo ottenere. Cliccate dunque sulle varie sezioni per vedere aprire e chiudere i relativi menù:

/* Stile base per il menu */ .accordion { display: flex; flex-direction: column; width: 600px; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; } /* Stile per ogni elemento del menu */ .accordion-item { border-bottom: 1px solid #ddd; overflow: hidden; transition: background-color 0.3s; } /* Stile per l’intestazione del menu (il titolo cliccabile) */ .accordion-item-header { display: flex;

Continua la lettura su: https://www.codingcreativo.it/accordion-menu/ Autore del post: Cristina Parma Fonte:

Related Articles

Nuovo PEI 2022-2023: guida operativa alla compilazione, esempi precompilati, documenti utili

In questo post, che racchiude risorse di diverso tipo a supporto dei docenti che hanno a che fare con la compilazione del nuovo PEI 2022-2023, troverai i seguenti contenuti:1. Guide Erickson (le migliori e più esaustive) alla compilazione del NUOVO PEI;2. Due guide, una testuale e una in formato video, alla compilazione del NUOVO PEI (tratta dal sito “diversi tutti”);3. Guida alla compilazione del NUOVO PEI elaborata dal Comprensivo di Calolziocorte(LC);4. Un esempio di NUOVO PEI precompilato;5. Una video guida alla compilazione del NUOVO PEI tratta dal canale Gessetti Colorati6. I documenti previsti dal decreto 182 del 2020 sono i seguenti.********************************1. In questo post forniamo ai colleghi diverse tipologie di materiali che riguardano la compilazione del nuovo PEI 2022-2023. Per questo ti consigliamo di leggere tutto l’articolo per trovare quelli che sono più congeniali alle tue esigenze.Per iniziare, consigliamo lo studio e la lettura integrale dei materiali proposti di seguito, perché, oltre a dare una cronice culturale e pedagogica esaustiva del nuovo PEI, ne illustrano anche nel dettaglio le caratteristiche. Li consigliamo soprattutto ai docenti di sostegno.- Costruire il nuovo PEI all’infanzia. Strumenti di osservazione, schede-guida ed esempi di sezioni compilate.- Costruire il nuovo PEI alla primaria. Strumenti di osservazione, schede-guida ed esempi di sezioni compilate.- Costruire il nuovo PEI alla secondaria di primo grado. Strumenti di osservazione, schede-guida ed esempi di sezioni compilate.- Costruire il nuovo PEI alla secondaria di secondo grado. Strumenti di osservazione, schede-guida ed esempi di sezioni compilate.- I NUOVI PEI: come sono e in che modo compilarli in ottica BIO-PSICO-SOCIALE.: SOS PEI-ICF- Costruire il nuovo PEI su base ICF 2022: Guida pratica per insegnanti alla compilazione del nuovo pei in ottica bio-psico-sociale. Con espansione on-line.2. Riportiamo, tratte dal sito diversitutti.com, due guide gratuite alla compilazione del nuovo PEI, una VIDEO e l’altra testuale. Quest’ultima è senza dubbio più approfondita dell’altra.- Guida VIDEO: Guida operativa alla compilazione del nuovo PEI ICF-CYOppure puoi vederlo in basso:
– Guida in formato Testuale. LINK: L’unica guida per compilare il PEI ICF, gratuita e operativa!3. COME COMPILARE IL NUVO PEI?Per aiutare i colleghi a compilare il nuovo PEI in ogni sua parte, proponiamo una guida elaborata dall’Istituto Comprensivo di Calolziocorte(LC): per ogni sezione del documento viene spiegato di cosa si tratta, cosa riportarvi, cosa inserire:VAI ALLA GUIDA PER LA COMPILAZIONE DEL NUOVO PEI4. NUOVO PEI: UN ESEMPIO PRECOMPILATOIn rosso le parti precompilate che, ovviamente, sono soltanto degli esempi che vanno modificati a seconda dell’alunno per il quale redigiamo il PEIVAI ALL’ESEMPIO DI PEI PRECOMPILATO5. VIDEO GUIDAUna video guida alla compilazione del NUOVO PEI tratta dal canale Gessetti ColoratiCOME COMPILARE IL NUOVO PEI6. I documenti previsti dal decreto 182 del 2020 sono i seguenti:Linee guida – Modalità di assegnazione delle misure di sostegno e modello di PEIModello di PEI per la scuola dell’infanzia  Modello di PEI per la scuola primaria  Modello di PEI per la scuola secondaria di I grado  Modello di PEI per la scuola secondaria di II grado  Scheda per l’individuazione del debito di funzionamento

Unità educativo didattiche di apprendimento per la settimana: la primavera, schede di grammatica e di analisi logica – Educare alla pace, alla libertà, alla fratellanza

E’ domenica, un’altra particolare e terribilmente triste domenica, e nonostante tutto ci si prepara per le lezioni da predisporre per la quarta settimana del mese di marzo. Il sito di didattica è ricco di argomenti per questo periodo e pertanto vi propongo alcune unità educativo didattiche che potrebbero risultare utili nelle varie attività di apprendimento. Quali argomenti possono essere utili questa settimana quale spunto per le lezioni? Il mese di marzo presenta scenari che offrono tantissimi spunti didattici i quali ricadono in modo estremamente positivo sulla sfera motivazionale del bambino e conseguentemente fanno leva sulla volontà di apprendere. Per la parte grammaticale il sito è ricco di proposte che vi propongo in toto. Non rimane che sfogliarle, potrebbero offrire qualche idea adatta per i vari percorsi educativo didattici di apprendimento. I post proposti tengono conto anche degli articoli che i docenti ricercano sul sito in questo periodo dell’anno scolastico. Eccovi i link da poter visionare:La primaveraLa primavera con la sua magnifica girandola di colori, suoni ed odori, si presta particolarmente per numerose attività educativo didattiche di apprendimento. Nel sito è possibile visionare numerosi post, relativi a questo argomento, che suscitano l’interesse delle bambine e dei bambini facili da consultare, ed eventualmente stampare, con le relative schede per la lettura, l’analisi e la comprensione del testo. Eccovi i link da poter visionare:”Arriva la primavera” – Dettato – Analisi, comprensione, ed interpretazione del testoRacconto di primavera: “La pioggia e le farfalle” – Analisi, comprensione ed interpretazione, del testo”La primavera” – Dettato – Analisi ed interpretazione del testoRitorna la primavera – Brano tratto da “Il Gigante Egoista” di Oscar Wilde – Lettura e comprensione del testo – Approfondimenti grammaticaliLa canzone della chiocciola di Jacques Prevert – Lettura e comprensione del testo.Primavera: “Ode a un ciuffo di violette” poesia di Pablo Neruda – Spunti grammaticali”I dodici mesi”, filastrocca di Gianni Rodari – Analisi ed interpretazione del testoPoesie, racconti, temi e dettati, che potrebbero interessarti:”I doni”, le quattro stagioni in una filastrocca di Angiolo Silvio NovaroPrimavera: “Ode a un ciuffo di violette” poesia di Pablo Neruda – Spunti grammaticaliLe quattro stagioni: filastrocche a rima baciata ed a rima alternataAprile, dolce dormire di Ugo BettiPrimavera in montagnaAprile di Aldo PalazzeschiPoesia di primaveraE’ dolce primavera di VirgilioPrimavera di Giovanni PascoliMarzo di Angiolo Silvio NovaroBrilla nell’aria di Giacomo LeopardiPrimavera di Stefano Bordiglioni”Una goccia di pioggia” di Mario LodiPasqua di Ada NegriAria di festa (tratto da i Malavoglia) di Giovanni VergaAlleluja di Angiolo Silvio NovaroFiabe antiche: “Il drago e l’uovo di Pasqua”Filastrocche di maggioFilastrocche d’aprileFilastrocche di marzoDettato: “Aspetti della primavera in campagna”. Spunti grammaticali.Le quattro stagioni: “La primavera” di Antonio Vivaldi. Suggerimenti per la didattica.Che dice la pioggerellina di marzo? di Angiolo Silvio NovaroRacconto di primaveraI mesi dell’anno di Angiolo Silvio NovaroLa primavera di Simone SchermiLa canzone della chiocciola di Jacques Prevert – Lettura e comprensione del testoLa signora primavera di Ercole BonjeanFilastrocca di primavera di Gianni RodariE’ arrivata la primavera!La primaveraI colori dei fioriFilastrocca di primavera di Ercole Bonjean”Saluto al sereno” filastrocca a rima baciata di Angiolo Silvio NovaroEducare alla paceNon solo in questo tragici giorni ma in ogni istante la scuola può e deve lottare per il rispetto dei valori fondamentali che la vita in comune comporta. Educare alla pace, la libertà, l’uguaglianza tra uomini e donne, tra tutti le persone “senza distinzioni” di alcun tipo. Sono questi obiettivi irrinunciabili a cui la società tutta deve dare il proprio contributo. Le bambine e i bambini, le ragazze e i ragazzi, si rivelano molto sensibili a questi argomenti che incidono sulla sfera motivazionale, fanno da leva alla volontà, e offrono spunti straordinariamente coinvolgenti, trasversali a tutte le materie oggetto di studio. Educare ed istruire sono due facce della stessa medaglia.(e. b.)Dichiarazione ONU sul diritto alla pace (2016)Articolo 1Ognuno ha il diritto di godere la pace in modo che tutti i diritti umani sono promossi e protetti e lo sviluppo è pienamente realizzato.Articolo 2Gli stati devono rispettare, implementare e promuovere l’eguaglianza e la non discriminazione, la giustizia e lo stato di diritto e garantire la libertà dalla paura e dal bisogno quali misure per costruire la pace dentro e fra le società.Articolo 3Gli Stati, le Nazioni Unite e le agenzie specializzate, in particolare l’Organizzazione delle Nazioni Unite per l’Educazione, la Scienza e la Cultura devono assumere appropriate misure sostenibili per implementare la presente Dichiarazione. Le organizzazioni internazionali, regionali, nazionali e locali e la società civile sono incoraggiate a prestare supporto e assistenza nell’implementazione della presente Dichiarazione.Articolo 4Saranno promosse le istituzioni internazionali e nazionali di educazione per la pace al fine di rafforzare fra tutti gli esseri umani lo spirito di tolleranza, dialogo, cooperazione e solidarietà. Per questo scopo, l’Università per la Pace deve contribuire al grande compito universale di educare per la pace impegnandosi nell’insegnamento, nella ricerca, nella formazione postuniversitaria e nella disseminazione della conoscenza.Articolo 5Nulla della presente Dichiarazione sarà interpretato in senso contrario agli obiettivi e ai principi delle Nazioni Unite. Le disposizioni contenute nella presente Dichiarazione devono essere intese in linea con la Carta delle Nazioni Unite, la Dichiarazione Universale dei Diritti Umani e i pertinenti strumenti internazionali e regionali ratificati dagli Stati.Quali percorsi educativo didattici possono essere utili perché gli alunni interiorizzino i valori fondamentali che devono regolare la vita in comune? Il sito per la scuola primaria è ricco di racconti, poesie, filastrocche, temi, che mi auguro possano favorire un approccio positivo a questi argomenti fondamentali per il vivere insieme:Giornata della pace della fraternità e del dialogo tra appartenenti a culture e religioni diverse (4 ottobre)Scuola e immigrazione: poesie, filastrocche, temi.Festa della Repubblica, 2 giugnoCome mai gli uomini muoiono in guerra?Tema: Racconto la mia esperienza con i compagni di scuola stranieriBreve unità didattica sul Natale: “Se io fossi Gesù Bambino vorrei che … “.San Francesco: attività educativo didattiche per la scuola primaria.”Lettera a Gesù” poesia di Mario LodiPoesia per la pace, di Berthold BrechtAttività educativo didattiche per la scuola primaria sul tema dell’immigrazione: racconti, poesie, filastrocche.Tema: “L’amicizia” di Francesca JupeUna poesia per la pace: “La pelle”Il gelato alla pacePoesie e filastrocche di Natale per bambini della scuola primariaFesta di Ognissanti: poesia per la Pace – Attribuita a San Francesco d’AssisiLa recita nella scuola primaria: “C’era un ragazzo che come me amava i Beatles e i Rolling Stones”. Una canzone per la pace.La leggenda della mimosa – Un racconto per l’8 marzo, festa della donnaLa leggenda dell’estate di San Martino – Percorsi educativo didattici di apprendimento”I due volti della Pasqua” poesia di Ercole Bonjean”Un giorno qualunque”, poesia di Ercole Bonjean”Vola colomba bianca” poesia di Ercole Bonjean”Ad un passo dalla costa” (proposta di lettura sul tema dell’immigrazione per la classe quinta della scuola primaria)Il Cantico delle Creature – San Francesco d’Assisi (adattamento del testo per la scuola primaria)”Il giorno più bello”, poesia di Ercole Bonjean”Io amo la Terra” poesia”Per non dimenticare” (la giornata della memoria)”Il Barbone aristocratico” “Un albero speciale” “Il mio maestro”Una filastrocca per l’ambiente”La Befana e il Befanone””Un giorno qualunque””Un regalo di Natale dal cielo”Nel giorno di San Francesco”Nuovo Anno”Lettera di Babbo Natale ai bambiniSchede di grammatica e di analisi logicaScheda di grammatica: i pronomi – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le preposizioni semplici ed articolate – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le congiunzioni – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le esclamazioni o interiezioni – Spiegazioni, esercizi di grammatica, prove di verifica.Scheda di grammatica: gli avverbi – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda  di grammatica – Le coniugazioni dei verbi: il modo infinitoScheda di grammatica – Il modo indicativo dei verbi: il tempo presenteScheda di grammatica – Il modo indicativo dei verbi: il passato prossimoScheda di grammatica – il modo indicativo dei verbi: il trapassato prossimo e il trapassato remotoScheda di grammatica – Il modo indicativo dei verbi: l’imperfettoScheda di grammatica – Il modo indicativo dei verbi: il passato remotoScheda di grammatica – Il modo indicativo dei verbi: il futuro sempliceScheda di grammatica – I verbi al modo condizionaleScheda di grammatica – I verbi al modo congiuntivoScheda di grammatica – I verbi irregolariScheda di grammatica – I verbi indefinitiScheda di grammatica – I verbi transitivi e intransitiviScheda di grammatica – La forma attiva e passiva del verboScheda di grammatica – I verbi riflessiviScheda di grammatica – I verbi impersonaliTi potrebbero interessare:Spiegazioni ed esercizi di grammaticaSpiegazioni ed esercizi di analisi logicaSchede di analisi logicaChe cos’è l’analisi logica e perché la studiamoIl soggetto e il predicato: l’enunciato minimo, spiegazioni ed eserciziIl soggetto e il predicato: spiegazioni ed eserciziIl soggetto e il predicato: esercizi di ribadimentoIl soggetto sottinteso: spiegazioni ed eserciziIl soggetto: eserciziIl soggetto (spiegazione ed esercizi per la classe quinta)L’attributo, l’apposizioneIl predicato verbale ed il predicato nominaleIl predicato verbaleIl predicato nominaleIl predicato verbale e nominale: eserciziIl complemento oggetto o direttoI complementi indirettiIl complemento di specificazioneIl complemento di termineIl complemento di tempoIl complemento di materiaIl complemento di mezzo Il complemento di causaIl complemento di modoIl complemento di origineIl complemento di luogoIl complemento predicativo del soggetto e dell’oggettoIl complemento d’agente e di causa efficienteEsercizi di analisi logicaEsercizi di analisi logicaEsercizi di analisi logicaVerificheVerificheVerificheTutti i post di analisi logicaRicordo alle colleghe ed ai colleghi che il motore di ricerca, presente in home page, è ricco di tantissimi argomenti che possono risultare utili per le varie attività didattiche. Buon proficuo lavoro dal maestro Ercole!

Vuoi rimanere aggiornato sulle nuove tecnologie per la Didattica e ricevere suggerimenti per attività da fare in classe?

Sei un docente?

soloscuola.it la prima piattaforma
No Profit gestita dai

Volontari Per la Didattica
per il mondo della Scuola. 

 

Tutti i servizi sono gratuiti. 

Associazione di Volontariato Koinokalo Aps

Ente del Terzo Settore iscritta dal 2014
Tutte le attività sono finanziate con il 5X1000