Tabbed smiley categories on help page

[Oblivion Knight]

I've used this tutorial to implement tabbed widgets..

I would now like to achieve similar on my smilies help page, as I'm using categories to offer alternative smilie sets.

 

[DL6]

I've used this tutorial to implement tabbed widgets..

I would now like to achieve similar on my smilies help page, as I'm using categories to offer alternative smilie sets.

Something like this should work in the template _help_page_smilies

Spoiler

<xf:css src="help_page_smilies.less" />

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <h2 class="block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
                <span class="hScroller-scroll">
                    <xf:foreach loop="$smilieCategories" key="$smilieCategoryId" value="$smilieCategory" i="$i">
                        <span class="tabs-tab{{ $i == 1 ? ' is-active' : '' }}" role="tab" aria-controls="smilieTab{$i}">
                            <xf:if is="!$smilieCategoryId">
                                {{ phrase('smilie_category_title.uncategorized') }}
                            <xf:else />
                                {$smilieCategory.title}
                            </xf:if>
                        </span>
                    </xf:foreach>
                </span>
            </h2>
            <ul class="tabPanes">
                <xf:foreach loop="$smilieCategories" key="$smilieCategoryId" value="$smilieCategory" i="$i">
                    <li class="{{ $i == 1 ? ' is-active' : '' }}" role="tabpanel" id="smilieTab{$i}">
                        <xf:datalist data-xf-init="responsive-data-list">
                            <xf:datarow rowtype="header">
                                <xf:cell class="dataList-cell--min">{{ phrase('image') }}</xf:cell>
                                <xf:cell>{{ phrase('title') }}</xf:cell>
                                <xf:cell>{{ phrase('text') }}</xf:cell>
                            </xf:datarow>
                            <xf:foreach loop="$smilieCategory.smilies" value="$smilie">
                                <xf:datarow rowclass="dataList-row--noHover">
                                    <xf:cell class="dataList-cell--min dataList-cell--alt">
                                        {{ smilie($smilie.smilie_text_options.0) }}
                                    </xf:cell>
                                    <xf:main label="{$smilie.title}" />
                                    <xf:cell>
                                        <span>
                                        <xf:foreach loop="$smilie.smilie_text_options" value="$smilieText">
                                            <span class="smilieText">{$smilieText}</span>
                                        </xf:foreach>
                                        </span>
                                    </xf:cell>
                                </xf:datarow>
                            </xf:foreach>
                        </xf:datalist>
                    </li>
                </xf:foreach>
            </ul>
        </div>
        <div class="block-footer">
            {{ phrase('smilies_provided_free_by_emojione') }}
        </div>
    </div>
</div>

 

[Oblivion Knight]

Something like this should work in the template _help_page_smilies

Spoiler

<xf:css src="help_page_smilies.less" />

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <h2 class="block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
                <span class="hScroller-scroll">
                    <xf:foreach loop="$smilieCategories" key="$smilieCategoryId" value="$smilieCategory" i="$i">
                        <span class="tabs-tab{{ $i == 1 ? ' is-active' : '' }}" role="tab" aria-controls="smilieTab{$i}">
                            <xf:if is="!$smilieCategoryId">
                                {{ phrase('smilie_category_title.uncategorized') }}
                            <xf:else />
                                {$smilieCategory.title}
                            </xf:if>
                        </span>
                    </xf:foreach>
                </span>
            </h2>
            <ul class="tabPanes">
                <xf:foreach loop="$smilieCategories" key="$smilieCategoryId" value="$smilieCategory" i="$i">
                    <li class="{{ $i == 1 ? ' is-active' : '' }}" role="tabpanel" id="smilieTab{$i}">
                        <xf:datalist data-xf-init="responsive-data-list">
                            <xf:datarow rowtype="header">
                                <xf:cell class="dataList-cell--min">{{ phrase('image') }}</xf:cell>
                                <xf:cell>{{ phrase('title') }}</xf:cell>
                                <xf:cell>{{ phrase('text') }}</xf:cell>
                            </xf:datarow>
                            <xf:foreach loop="$smilieCategory.smilies" value="$smilie">
                                <xf:datarow rowclass="dataList-row--noHover">
                                    <xf:cell class="dataList-cell--min dataList-cell--alt">
                                        {{ smilie($smilie.smilie_text_options.0) }}
                                    </xf:cell>
                                    <xf:main label="{$smilie.title}" />
                                    <xf:cell>
                                        <span>
                                        <xf:foreach loop="$smilie.smilie_text_options" value="$smilieText">
                                            <span class="smilieText">{$smilieText}</span>
                                        </xf:foreach>
                                        </span>
                                    </xf:cell>
                                </xf:datarow>
                            </xf:foreach>
                        </xf:datalist>
                    </li>
                </xf:foreach>
            </ul>
        </div>
        <div class="block-footer">
            {{ phrase('smilies_provided_free_by_emojione') }}
        </div>
    </div>
</div>

Amazing, it works perfectly.. Thank you @DL6