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.

Akordeon metni ve ayarları bu tarayıcı sekmesinde kalır. Livewire üzerinden gönderilmez, URL'ye konmaz veya yüklenmez. Sekme kapatıldığında kaydedilmiş adım durumu temizlenir.

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

İkilik Tabandan ASCII'ye Dönüştürücü

İkilik veri yapıştırın (boşlukla ayrılmış baytlar veya uzun bir bit dizisi) ve temsil ettiği ASCII metni alın. 7 bit ve 8 bit kodlamaları destekler.

BBCode HTML Dönüştürücü

BBCode'u (forum işaretlemesi) temiz HTML'e dönüştürün. Biçimlendirme etiketleri, listeler, alıntılar, kod, görseller, linkler ve tabloları işler.

Binary'den Hex'e Dönüştürücü

Binary girdiyi sade büyük harfli hexadecimal değere dönüştürün. Binary olmayan karakterler yok sayılır ve baştaki sıfırlar korunmaz.

İkiliden Sekizliye Dönüştürücü

Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.

HEX Renk Seçici

HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.

ASCII İkili Dönüştürücü

Herhangi bir ASCII dizesini ikili gösterimine dönüştürün. Her karakter sekiz bite dönüşür, boşlukla ayrılır ve protokol izine ya da ödeve yapıştırmaya hazırdır.