Accordion

Akordeon menü bileşeni.

Akordeon menü bileşeni ile daraltılabilir bloklar oluşturabilirsiniz.

accordion-title akordeon menü başlığı sınıfıdır.
Kullanımı zorunlu değil, sınıf tanımlanmadığı takdirde data-toggle="accordion" tanımlı element baz alınır.
.accordion-body akordeon menü içerik kapsayıcısı için kullanılan sınıf.

data-toggle="accordion" ön adı kullanarak js yazmadan bu bileşeni sayfanızda kullanabilirsiniz.

Aldığı parametreler / özellikler#

Akordeon menü başlığı a elementi olarak kullanılabilir. Kullanıldığı taktirde href özelliğine tanımlanan seçici akordeon menü içeriği olarak baz alınır.
data-target="#my-element-id" şeklinde farklı bir seçici akordeon menü içeriği olarak tanımlanabilir.
data-mobile="true" özelliği ile sadece mobilde çalışacak akordeon menüler oluşturabilirsiniz.

Örnek kullanımı - 1

<div class="accordion-title" data-toggle="accordion">
    Akerdeon menü başlığı
    <span class="icon-wrapper">
        <i class="ti ti-plus"></i>
        <i class="ti ti-minus"></i>
    </span>
</div>
<div class="accordion-body">Akerdeon menü içeriği</div>

Örnek kullanımı - 2

<div class="accordion-title" data-toggle="accordion" data-target="#accodion-body">
    Akerdeon menü başlığı
    <span class="icon-wrapper">
        <i class="ti ti-plus"></i>
        <i class="ti ti-minus"></i>
    </span>
</div>
<div id="accodion-body" class="accordion-body">Akerdeon menü içeriği</div>

Örnek kullanımı - 3

<a href="#accodion-body" data-toggle="accordion">
    Akerdeon menü başlığı
    <span class="icon-wrapper">
        <i class="ti ti-plus"></i>
        <i class="ti ti-minus"></i>
    </span>
</div>
<div id="accodion-body" class="accordion-body">Akerdeon menü içeriği</div>

Mobilde çalışacak akordeon menü örnek kullanımı

<div class="accordion-title" data-toggle="accordion" data-mobile="true">
    Akerdeon menü başlığı
    <span class="icon-wrapper">
        <i class="ti ti-plus"></i>
        <i class="ti ti-minus"></i>
    </span>
</div>
<div class="accordion-body">Akerdeon menü içeriği</div>

Biri açılırken diğeri kapanan akordion#

Akordeon menüsünde bir alan açıldığında diğerinin kapanması isteniyorsa kapsayıcıya accordion-wrapper classının verilmesi gerekiyor.

Örnek kullanımı - 1

<div class="accordion-wrapper">
    <div class="accordion-title" data-toggle="accordion">
        Akerdeon menü başlığı
        <span class="icon-wrapper">
            <i class="ti ti-plus"></i>
            <i class="ti ti-minus"></i>
        </span>
    </div>
    <div class="accordion-body">Akerdeon menü içeriği</div>
    <div class="accordion-title" data-toggle="accordion">
        Akerdeon menü başlığı
        <span class="icon-wrapper">
            <i class="ti ti-plus"></i>
            <i class="ti ti-minus"></i>
        </span>
    </div>
    <div class="accordion-body">Akerdeon menü içeriği</div>
</div>