Softonic

CSS-accordiongenerator

Steg 1 / 4 Innehåll

Accordioninnehåll

Ange rubriker och panelinnehåll som vanlig text. HTML-liknande text kodas säkert i den genererade koden.

Skapa en accordion med tre avsnitt som använder de semantiska elementen <details> och <summary>. Ange rubriker och paneler som vanlig text, anpassa utseendet, testa tangentbordet och kopiera säkert kodad HTML och CSS eller hämta en fristående fil. Allt stannar på webbläsarfliken.

Så skapar du en CSS-accordion

  1. 1

    Skriv tre avsnitt

    Lägg till en kort rubrik och vanlig paneltext i varje avsnitt. HTML-liknande text kodas och körs inte.

  2. 2

    Välj utseende

    Ange fyra hexadecimala färger, hörnradie 0 till 24 px och inre avstånd 8 till 32 px.

  3. 3

    Ange öppningsbeteende

    Tillåt flera paneler eller använd det inbyggda `name`-attributet för en exklusiv grupp. Välj vinkelpil eller plus/minus.

  4. 4

    Testa och exportera

    Prova förhandsvisningen med pekare och tangentbord och kopiera koden eller hämta en UTF-8-HTML-fil.

Genererad kod

Varje avsnitt använder <details> med <summary> och panel. CSS-koden styr färger, kant, fokus, avstånd, hörn och indikator. Logiska egenskaper stöder höger-till-vänster-layout, och önskemål om minskad rörelse tar bort övergången.

Läget med flera paneler skapar inget name. Läget med en panel ger alla tre samma name="generated-accordion". Äldre webbläsare utan exklusiva grupper visar fortfarande användbara oberoende paneler.

Rubriker och paneler är alltid vanlig text. Vinkelparenteser, et-tecken, citattecken och apostrofer kodas, så inklistrade taggar körs inte. Lägg vid behov till granskad formatering efter exporten.

Text och inställningar skickas inte till servern. Flersidesläget använder bara sessionStorage på den aktuella fliken och lägger inte innehållet i URL:en. När fliken stängs raderas tillståndet.

Vanliga frågor

Nej. Öppning använder det inbyggda beteendet i <details> och <summary>. Filen innehåller bara HTML och CSS.

Ja. Läget med en panel ger alla tre details-element samma name i webbläsare med stöd.

Inte i redigeraren: innehållet kodas avsiktligt som text. Lägg till granskad HTML efter exporten.

Nej. Inmatning, förhandsvisning, kopiering och hämtning stannar på webbläsarfliken.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

Verktyget finns på andra språk