Softonic

Generatore di accordion CSS

Passaggio 1 / 4 Contenuto

Contenuto dell’accordion

Inserisci titoli e pannelli come testo semplice. Il testo simile a HTML viene sottoposto a escape nel codice generato.

Testo e impostazioni restano in questa scheda. Non vengono inviati tramite Livewire, inseriti nell’URL o caricati. Chiudendo la scheda si elimina lo stato temporaneo del percorso.

Crea un accordion di tre sezioni con gli elementi semantici <details> e <summary>. Inserisci titoli e pannelli come testo semplice, personalizza l’aspetto, prova la tastiera e poi copia HTML e CSS con escape oppure scarica un file autonomo. Tutto resta nella scheda del browser.

Come creare un accordion CSS

  1. 1

    Scrivi tre sezioni

    Aggiungi a ogni sezione un titolo breve e un pannello in testo semplice. Il testo simile a HTML viene sottoposto a escape.

  2. 2

    Scegli l’aspetto

    Imposta quattro colori esadecimali, un raggio da 0 a 24 px e una spaziatura interna da 8 a 32 px.

  3. 3

    Definisci l’apertura

    Consenti più pannelli oppure usa l’attributo `name` nativo per un gruppo esclusivo. Scegli un chevron o più/meno.

  4. 4

    Prova ed esporta

    Verifica l’anteprima con puntatore e tastiera, poi copia il codice o scarica un file HTML UTF-8.

Codice generato

Ogni sezione usa un elemento <details> con <summary> e pannello. Il CSS definisce colori, bordo, focus, spaziatura, angoli e indicatore. Usa proprietà logiche per i layout da destra a sinistra e rimuove la transizione quando l’utente preferisce meno movimento.

La modalità multipla non aggiunge name. La modalità singola assegna lo stesso name="generated-accordion" ai tre elementi. I browser più vecchi che non supportano i gruppi esclusivi mantengono pannelli indipendenti comunque utilizzabili.

Titoli e pannelli sono sempre testo semplice. Parentesi angolari, e commerciali, virgolette e apostrofi vengono sottoposti a escape, quindi un tag incollato non viene eseguito. Se serve, aggiungi markup affidabile dopo l’esportazione.

Testi e impostazioni non vengono inviati al server. Il percorso su più pagine usa solo sessionStorage nella scheda corrente e non inserisce i contenuti nell’URL. La chiusura della scheda elimina lo stato.

Domande frequenti

No. L’apertura usa il comportamento nativo di <details> e <summary>. Il file contiene solo HTML e CSS.

Sì. La modalità singola assegna lo stesso attributo name ai tre elementi details nei browser compatibili.

Non nell’editor: il contenuto viene volutamente trattato come testo. Aggiungi markup controllato dopo l’esportazione.

No. Inserimento, anteprima, copia e download restano nella scheda del browser.

Strumenti correlati

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Convertitore BBCode in HTML

Converti BBCode (markup per forum) in HTML pulito. Gestisce tag di formattazione, elenchi, citazioni, codice, immagini, link e tabelle.

Generatore di Palette di Colori

Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.

Semplificatore di Algebra Booleana

Semplifica le espressioni booleane utilizzando le mappe di Karnaugh e l'algoritmo di Quine-McCluskey. Mostra ogni passo di minimizzazione e una forma finale SOP/POS.

Generatore di palette colori casuali

Genera palette casuali da 2 a 15 campioni, scegli uno stile vivace, pastello, tenue o scuro e copia codici HEX o variabili CSS.

Convertitore da binario a hex

Converti un input binario in un valore esadecimale semplice in maiuscolo. I caratteri non binari vengono ignorati e gli zeri iniziali non vengono conservati.