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.

Text och inställningar stannar på den här fliken. De skickas inte via Livewire, placeras inte i webbadressen och laddas inte upp. När fliken stängs raderas det tillfälliga flödestillståndet.

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

Binär till oktal-konverterare

Konvertera binärt till oktalt genom att gruppera bitar tre och tre. Användbart för Unix-rättigheter, äldre system och kompakt numerisk visning.

BBCode till HTML-konverterare

Konvertera BBCode (bulletin board-markup) till ren HTML. Hanterar formateringstaggar, listor, citat, kod, bilder, länkar och tabeller.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Binär till ASCII-konverterare

Klistra in binärdata (mellanslagsseparerade bytes eller en lång bitström) och få ASCII-texten den representerar. Hanterar 7-bitars och 8-bitars kodningar.

Binär till decimal

Konvertera binära tal till decimal direkt. Visar positionsutvecklingen så att du ser hur varje bit bidrar.

Binär till hex-konverterare

Konvertera binär inmatning till ett vanligt hexadecimalt värde med versaler. Icke-binära tecken ignoreras och inledande nollor bevaras inte.