Kullanım tekniği - Açılır Kapanır (Akordiyon) Kategori Widget Ekleme | XenGenTr - Türkiye'nin XenForo Türkçe destek topluluğu

Açılıp kapanabilen (akordiyon) linkler eklemek için önce yeni bir widget oluşturuyoruz.

Görünüm ve diller > Widget yöneticisi > Widget ekle

Widget tanımı: HTML
-------
Widget kimliği-ID: menu_akordiyon
Başlık: Menü
Bu pozisyonlarda göster: Widgetin görünmesini istediğiniz alanları seçin...

Şablon:

HTML:

<ol class="categoryList toggleTarget is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">          
                <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>      
            <a href="link" class="categoryList-link">
                Link-1
            </a>
        </div>          
    <ol class="categoryList toggleTarget">
       
    <li class="categoryList-item">
        <div class="categoryList-itemRow">      
                <span class="categoryList-togglerSpacer"></span>  
            <a href="link" class="categoryList-link">
                Alt link-1
            </a>
        </div>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">  
                <span class="categoryList-togglerSpacer"></span>  
            <a href="link" class="categoryList-link">
                Alt link-2
            </a>
        </div>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-3
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-4
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-5
            </a>
        </div>
    </li>
   
    </ol>      
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>
            <a href="link" class="categoryList-link">
                Link-2
            </a>
        </div>
       
    <ol class="categoryList toggleTarget" style="" tabindex="-1">
       
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-2.1
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-2.2
            </a>
        </div>
    </li>  

        <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-2.3
            </a>
        </div>
    </li>

    </ol>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-3
            </a>
        </div>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-4
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-5
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-6
            </a>
        </div>
    </li>  
   
    </ol>

HTML kodlardaki linkleri ve kategori isimlerini kendinize göre düzenleyin...