Softonic

CSS Akordeon Oluşturucu

Adım 1 / 4 İçerik

Akordeon içeriği

Başlıkları ve panel içeriğini düz metin olarak girin. HTML benzeri metin, üretilen kodda kaçış karakterleriyle güvenli hale getirilir.

Anlamlı <details> ve <summary> öğeleriyle üç bölümlü bir akordeon oluşturun. Düz metin başlıklarını ve panelleri düzenleyin; renkleri, boşlukları ve açılma biçimini seçin; önizlemeyi deneyin, ardından kodu kopyalayın veya bağımsız HTML dosyasını indirin. Düzenleyici tamamen bu tarayıcı sekmesinde çalışır.

CSS akordeon nasıl oluşturulur?

  1. 1

    Üç bölümü yazın

    Her öğeye kısa bir başlık ve düz metin paneli ekleyin. HTML benzeri giriş çalıştırılmaz, kaçış karakterleriyle güvenli hale getirilir.

  2. 2

    Tasarımı seçin

    Altı haneli dört renk, 0-24 px köşe yarıçapı ve 8-32 px iç boşluk belirleyin.

  3. 3

    Açılma biçimini ayarlayın

    Birden fazla paneli açık tutun veya yerel name niteliğiyle tek panel kullanın. Şevron ya da artı ve eksi simgesini seçin.

  4. 4

    Sınayın ve dışa aktarın

    Canlı önizlemeyi işaretçi ve klavyeyle deneyin, ardından kodu kopyalayın veya UTF-8 HTML dosyasını indirin.

Oluşturulan kod

Her bölüm tarayıcının yerel açılır öğelerini kullanır:

<details class="generated-accordion" open>
  <summary>Neler dahil?</summary>
  <div class="generated-accordion__panel">Ayrıntıları buraya ekleyin.</div>
</details>

Üretilen CSS kenarlığı, başlık arka planını, metni, odağı, boşlukları, köşeleri ve simgeyi biçimlendirir. margin-inline-start gibi mantıksal özellikler ile sağdan sola kuralları içerir. prefers-reduced-motion medya sorgusu, daha az hareket isteyen ziyaretçiler için simge geçişini kaldırır.

Birden fazla veya tek panel

Ayar Üretilen işaretleme Sonuç
Birden fazla Ortak name yok Her bölüm bağımsız açılır
Tek panel Tümünde name="generated-accordion" Destekleyen tarayıcıda biri açıldığında diğeri kapanır

Özel details gruplarını desteklemeyen eski tarayıcılarda akordeon kullanılabilir kalır, ancak birden fazla panel açık kalabilir.

Güvenli düz metin

Başlıklar ve paneller metin olarak işlenir. <, >, &, tırnak işaretleri ve kesme işaretleri kodda kaçış karakterleriyle güvenli hale getirildiği için yapıştırılan etiket çalışmaz, metin olarak görünür. Bağlantı veya liste gerekiyorsa dışa aktardıktan sonra denetlenmiş işaretlemeyi ekleyin.

Yayımlamadan önce erişilebilirlik denetimi

  • Tab ile her summary öğesine gidin, Enter ve Boşluk ile açıp kapatın.
  • Odak renginin başlık ve sayfa arka planında yeterli kontrasta sahip olduğunu doğrulayın.
  • Yakınlaştırmayı, dar ekranı ve sağdan sola sayfaları sınayın.
  • Sayfanın temel yönergesini yalnızca kapalı bir panelde saklamayın.

Sık Sorulan Sorular

Hayır. Açma ve kapatma, yerel <details> ve <summary> davranışını kullanır. İndirilen bileşen yalnızca HTML ve CSS içerir.

Evet. Tek panel ayarını seçtiğinizde üç <details> öğesi aynı name niteliğini alır. Eski tarayıcılar bağımsız panellere geri döner.

Düzenleyici girdiyi bilerek düz metin olarak işler ve HTML karakterlerini güvenli hale getirir. Gerekirse dışa aktardıktan sonra denetlenmiş işaretlemeyi ekleyin.

Hayır. Metin, ayarlar, önizleme, kopyalama ve indirme tarayıcıda kalır. Sayfalar arasında geçici durum geçerli sekmenin sessionStorage alanında tutulur ve URL’ye yazılmaz.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

JSON Minifier

API yanıtlarında ve gömülü yapılandırmalarda payload boyutunu küçültmek için boşlukları, satır sonlarını ve yorumları kaldırarak JSON'u küçültün.

CSS Fiyat Tablosu Oluşturucu

HTML + CSS ile tek bir fiyat kartı oluşturun: paket adı, fiyat ve marka vurgu rengi. Kodu açılış sayfanıza kopyalayın.

Araç diğer dillerde mevcuttur