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.

Je tekst en instellingen blijven in dit browsertabblad. Ze worden niet via Livewire verzonden, in de URL gezet of geüpload. Het sluiten van het tabblad wist de tijdelijke funnelstatus.

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

Binair naar hex-converter

Converteer binaire invoer naar een gewone uppercase hexwaarde. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.

HEX-kleurkiezer

Kies of typ een HEX-kleur en krijg RGB, HSL, geschat CMYK, relatieve luminantie en contrast tegen wit en zwart.

BBCode naar HTML-converter

Converteer BBCode (bulletin-board markup) naar schone HTML. Verwerkt opmaaktags, lijsten, quotes, code, afbeeldingen, links en tabellen.

Base64 naar Hex converteren

Converteer een Base64-string naar de onderliggende bytes als hexadecimaal. Handig voor het inspecteren van tokens, sleutels, certificaten en JWTs.

Binair naar ASCII-converter

Plak binaire data (spatiegescheiden bytes of een lange bitstream) en krijg de ASCII-tekst die die data vertegenwoordigt. Verwerkt 7-bit en 8-bit encodings.

Binair naar decimaal

Converteer binaire getallen direct naar decimaal. Toont de positionele uitwerking zodat je ziet hoe elke bit bijdraagt.