XenForo Akordiyon Widget Ekleme

[root]

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...

<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.