Softonic

CSS-accordeongenerator

Stap 1 / 4 Inhoud

Accordeoninhoud

Voer koppen en paneelinhoud in als platte tekst. HTML-achtige tekst wordt in de gegenereerde code escaped.

Maak een accordeon met drie secties op basis van de semantische elementen <details> en <summary>. Voer koppen en panelen in als platte tekst, pas de vormgeving aan, test het toetsenbord en kopieer de veilig gecodeerde HTML en CSS of download een zelfstandig bestand. Alles blijft in het browsertabblad.

Zo maak je een CSS-accordeon

  1. 1

    Schrijf drie secties

    Voeg aan elke sectie een korte kop en paneeltekst toe. HTML-achtige invoer wordt escaped en niet uitgevoerd.

  2. 2

    Kies de vormgeving

    Stel vier hexkleuren, een hoekafronding van 0 tot 24 px en binnenruimte van 8 tot 32 px in.

  3. 3

    Stel het gedrag in

    Laat meerdere panelen open of gebruik het native `name`-attribuut voor één open paneel. Kies een chevron of plus/min.

  4. 4

    Test en exporteer

    Test het voorbeeld met aanwijzer en toetsenbord en kopieer de code of download een UTF-8-HTML-bestand.

Gegenereerde code

Elke sectie gebruikt <details> met een <summary> en paneel. De CSS bepaalt kleuren, rand, focus, ruimte, hoeken en indicator. Logische eigenschappen ondersteunen rechts-naar-linksopmaak. Bij een voorkeur voor minder beweging vervalt de overgang.

In de meervoudige stand wordt geen name gemaakt. De enkelvoudige stand geeft alle drie elementen hetzelfde name="generated-accordion". Oudere browsers zonder exclusieve groepen blijven bruikbare onafhankelijke panelen tonen.

Koppen en panelen blijven platte tekst. Punthaken, ampersands, aanhalingstekens en apostrofs worden escaped, zodat geplakte tags niet worden uitgevoerd. Voeg zo nodig pas na export gecontroleerde opmaak toe.

Tekst en instellingen gaan niet naar de server. De meerstappenmodus gebruikt alleen sessionStorage in het huidige tabblad en zet geen inhoud in de URL. Het sluiten van het tabblad wist de status.

Veelgestelde vragen

Nee. Openen en sluiten gebruikt het native gedrag van <details> en <summary>. Het bestand bevat alleen HTML en CSS.

Ja. De enkelvoudige stand geeft de drie details-elementen hetzelfde name-attribuut in ondersteunde browsers.

Niet in de editor: de invoer wordt bewust als tekst escaped. Voeg gecontroleerde opmaak na export toe.

Nee. Invoer, voorbeeld, kopiëren en downloaden blijven in het browsertabblad.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

JavaScript-obfuscator

Obfusceer JavaScript met string-array-codering, hernoemen van variabelen, control-flow-flattening en injectie van dode code ter bescherming van de front-end.

Tool beschikbaar in andere talen