أخفاء وأظهار الأقسام فى زينفورو Collapsible Category

اخفاء واظهار الأقسام فى المنتدى فى الرئيسية

يوجد العديد من الاضافات التى تقوم بهذه المهمة ولكن سوف نقوم بهذه المهمة الأن وبدون اضافة
عبر التعديل على القالب node_list_category

• أستبدل القالب node_list_category بالكامل بهذا الكود :

<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="block block--category block--category{$node.node_id} collapsible-nodes">
        <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
        <div class="block-container">
            <h2 class="block-header">
            <div class="block-header--left">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}"><div class="block-desc">{$node.description|raw}</div></xf:if></div>
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
            </h2>
            <div class="block-body block-body--collapsible is-active">
                <xf:macro template="forum_list" name="node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="node node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
        <div class="node-body">
            <span class="node-icon" aria-hidden="true"><i></i></span>
            <div class="node-main js-nodeMain">
                <xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
                <h3 class="node-title">
                    <a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
                </h3>
                <xf:if is="$descriptionDisplay != 'none' && $node.description">
                    <div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
                </xf:if>

                <div class="node-meta">
                    <xf:if is="!{$extras.privateInfo}">
                        <div class="node-statsMeta">
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('threads') }}</dt>
                                <dd>{$extras.discussion_count|number}</dd>
                            </dl>
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('messages') }}</dt>
                                <dd>{$extras.message_count|number}</dd>
                            </dl>
                        </div>
                    </xf:if>

                    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
                        <xf:macro template="forum_list" name="sub_nodes_menu"
                            arg-children="{$children}"
                            arg-childExtras="{$childExtras}"
                            arg-depth="{{ $depth + 1 }}" />
                    </xf:if>
                </div>

                <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro template="forum_list" name="sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>
            </div>

            <xf:if is="!{$extras.privateInfo}">
                <div class="node-stats">
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('threads') }}</dt>
                        <dd>{$extras.discussion_count|number}</dd>
                    </dl>
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('messages') }}</dt>
                        <dd>{$extras.message_count|number}</dd>
                    </dl>
                </div>
            </xf:if>

            <div class="node-extra">
                <xf:if is="{$extras.privateInfo}">
                    <span class="node-extra-placeholder">{{ phrase('private') }}</span>
                <xf:elseif is="{$extras.last_post_date}" />
                    <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
                    <div class="node-extra-row">
                        <ul class="listInline listInline--bullet">
                            <li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
                            <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                                <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                            <xf:else />
                                <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                            </xf:if>
                        </ul>
                    </div>
                <xf:else />
                    <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                </xf:if>
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <li>
        <a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
        <xf:macro template="forum_list" name="sub_node_list"
            arg-children="{$children}"
            arg-childExtras="{$childExtras}"
            arg-depth="{{ $depth + 1 }}" />
    </li>
</xf:macro>

وضع التنسيق التالى بالقالب extra.less

.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
 
    .block-body
    {
        transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        -webkit-transition-property: all, -xf-opacity;
        transition-property: all, -xf-opacity;
        overflow-y: hidden;
        height: 0;
        -webkit-transition-property: all, -xf-height;
        transition-property: all, -xf-height;
        &.is-active
        {
            height: auto;
        }
    }
}