Softonic

Generator akordeonu CSS

Krok 1 / 4 Treść

Treść akordeonu

Wprowadź nagłówki i treść paneli jako zwykły tekst. Tekst przypominający HTML zostanie bezpiecznie zakodowany w wygenerowanym kodzie.

Tekst i ustawienia pozostają w tej karcie. Nie są wysyłane przez Livewire, umieszczane w adresie URL ani przesyłane na serwer. Zamknięcie karty usuwa tymczasowy stan kreatora.

Utwórz akordeon z trzema sekcjami, korzystający z semantycznych elementów <details> i <summary>. Wpisz nagłówki i panele jako zwykły tekst, dostosuj wygląd, sprawdź obsługę klawiaturą, a potem skopiuj bezpiecznie zakodowany HTML i CSS lub pobierz samodzielny plik. Wszystko pozostaje w karcie przeglądarki.

Jak utworzyć akordeon CSS

  1. 1

    Napisz trzy sekcje

    Dodaj do każdej sekcji krótki nagłówek i zwykły tekst panelu. Treść przypominająca HTML jest kodowana, a nie wykonywana.

  2. 2

    Wybierz wygląd

    Ustaw cztery kolory szesnastkowe, promień od 0 do 24 px i odstęp wewnętrzny od 8 do 32 px.

  3. 3

    Ustal otwieranie

    Pozwól otwierać kilka paneli albo użyj natywnego atrybutu `name` dla grupy wyłącznej. Wybierz szewron lub plus/minus.

  4. 4

    Sprawdź i wyeksportuj

    Przetestuj podgląd wskaźnikiem i klawiaturą, po czym skopiuj kod lub pobierz plik HTML UTF-8.

Wygenerowany kod

Każda sekcja używa <details> z elementem <summary> i panelem. CSS ustawia kolory, obramowanie, fokus, odstępy, narożniki i wskaźnik. Właściwości logiczne obsługują układ od prawej do lewej, a preferencja ograniczonych animacji wyłącza przejście.

Tryb wielu paneli nie tworzy name. Tryb jednego panelu nadaje wszystkim trzem elementom ten sam name="generated-accordion". Starsze przeglądarki bez grup wyłącznych nadal pokazują użyteczne, niezależne panele.

Nagłówki i panele są zwykłym tekstem. Nawiasy ostre, ampersandy, cudzysłowy i apostrofy są kodowane, więc wklejony znacznik nie zostanie wykonany. Zaufane formatowanie dodaj samodzielnie po eksporcie.

Tekst i ustawienia nie trafiają na serwer. Tryb wielostronicowy używa tylko sessionStorage w bieżącej karcie i nie umieszcza treści w adresie URL. Zamknięcie karty usuwa stan.

Najczęściej zadawane pytania

Nie. Otwieranie korzysta z natywnego działania <details> i <summary>. Plik zawiera tylko HTML i CSS.

Tak. Tryb pojedynczy nadaje wszystkim trzem elementom details ten sam atrybut name w obsługiwanych przeglądarkach.

Nie w edytorze: treść jest celowo kodowana jako tekst. Sprawdzone formatowanie dodaj po eksporcie.

Nie. Wpisywanie, podgląd, kopiowanie i pobieranie pozostają w karcie przeglądarki.

Powiązane narzędzia

Konwerter Base64 na Hex

Konwertuj ciąg Base64 na jego bazowe bajty zapisane szesnastkowo. Przydatne do inspekcji tokenów, kluczy, certyfikatów i JWT.

Konwerter binarny na hex

Konwertuj wejście binarne na zwykłą wartość szesnastkową wielkimi literami. Znaki inne niż 0 i 1 są ignorowane, a zera wiodące nie są zachowywane.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Konwerter binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.

Konwerter binarnego na ASCII

Wklej zapis binarny (bajty rozdzielone spacjami albo długi strumień bitów) i otrzymaj tekst ASCII, który reprezentuje. Obsługuje kodowania 7-bitowe i 8-bitowe.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.