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

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

CSS-laddningsgenerator

Skapa en cirkulär spinnare i ren CSS: ställ in diameter, kanttjocklek, accentfärg och rotationshastighet, förhandsvisa direkt och kopiera den färdiga CSS-koden. Ingen SVG, ingen JavaScript.

OpenAPI-validerare

Klistra in ett OpenAPI- eller Swagger-dokument i JSON eller YAML och kontrollera dess kärnstruktur: versionsfält, info-objekt och paths, med tydliga fel och varningar.

PHP-formaterare

Lägg till radbrytningar och indrag med 2 eller 4 blanksteg i ett enkelt PHP-kodstycke. Granska resultatet: detta är varken en PHP-parser eller en PSR-12-korrigerare.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

Verktyget finns på andra språk