Canlı Önizleme
Kopyala butonuna basınız, CSS'i sitenize yapıştırınız. Bitti!
Tamamen ücretsiz ve reklamsızdır.
Nasıl Kullanılır?
Her label için ayrı bir input checkbox 'id' si vermeniz gerekmektedir.
Kaynak Kodlar
HTML
<div class="accordion">
<input type="checkbox" id="acc1">
<label class="acc-label" for="acc1">Sistem Nasıl Çalışır?</label>
<div class="acc-content"><p>Kopyala butonuna basınız, CSS'i sitenize yapıştırınız. Bitti!</p></div>
<input type="checkbox" id="acc2">
<label class="acc-label" for="acc2">Ücretli mi?</label>
<div class="acc-content"><p>Tamamen ücretsiz ve reklamsızdır.</p></div>
</div>CSS
.accordion { width: 300px; background: #2a2a35; border-radius: 10px; overflow: hidden; font-family: 'Inter', sans-serif; }
.accordion input { display: none; }
.acc-label { display: block; padding: 15px 20px; color: #fff; font-weight: 600; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.3s; }
.acc-label:hover { background: rgba(0,206,201,0.1); color: #00cec9; }
.acc-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: rgba(255,255,255,0.02); }
.acc-content p { padding: 15px 20px; color: #a0a0b0; margin: 0; font-size: 14px; }
.accordion input:checked + .acc-label + .acc-content { max-height: 200px; }
.accordion input:checked + .acc-label { background: rgba(108,92,231,0.2); border-left: 4px solid #6C5CE7; padding-left: 16px; }