Help Collapse Category for xenforo - hiệu ứng thu gọn Category

[Cu tí siêu nhân]

CHào các bác.
E có làm theo bài này: Link
nhưng nó ko hiển thị cái dấu + hoặc - ở phần thu gọn ở phần category
E làm theo cách bác này là để màu và thì xấu quá : Link
Nhờ bác nào rành code chỉ dùm e nên sửa lại đoạn:

.nodeList .category .category_toggle_container a.toggle_arrow {
    background: url("../styles/xenforo/images.png") no-repeat scroll center -180px rgba(0, 0, 0, 0);
    float: right;
    height: 13px;
    text-indent: -9999px;
    width: 13px;
}

để nó hiển thị hình ảnh dấu + - cho dễ nhìn đc không.
và kích thước ảnh e nên để là bao nhiêu để nó vừa, và dấu + - đó làm hình ngang hay dọc ạ (ảnh của bài gốc bị mất nên e mù tịt luôn)
Nhờ các bác giúp dùm.

 

[hardcore]

Có addon rồi nhé chịu khó search trước khi hỏi.Chiều mình đính kèm cho

 

[vanphu113]

Cảu bạn đây . tham khảo nhé

 

[Cu tí siêu nhân]

Cảu bạn đây . tham khảo nhé

thấy gì đâu bác

 

[Cu tí siêu nhân]

Có addon rồi nhé chịu khó search trước khi hỏi.Chiều mình đính kèm cho

ý m là muốn sửa cho trong code cho gọn chứ addon vào rầy rà lắm bạn.
m thay 1 hình tĩnh rồi ko cần nữa b ak, nhìn củng đẹp mắt rồi chứ ko màu đỏ như web bạn kia bẩn quá )

 

[vanphu113]

​

Đầu tiên các bạn vào template node_category_level_1 tìm

<h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>

Thêm vào bên dưới đó code

<span class="category_toggle_container">
<a class="toggle_arrow brToggle Tooltip">Collapse Category</a>
</span>

Sau đó bạn vào template Extra.css thêm code sau vào cuối

.nodeList .category .category_toggle_container {box-sizing: border-box;display: block;float: right;height: 37px;padding-right: 11px;padding-top: 12px;position: absolute;right: 0;top: 0;width: 37px;
}
.nodeList .category .category_toggle_container a.toggle_arrow {background: url("http://levanphu.com/hvn-images.png") no-repeat scroll center -180px rgba(0, 0, 0, 0);float: right;height: 13px;text-indent: -9999px;width: 13px;
}

Tiếp theo bạn vào tempalte forum_list thêm vào cuối code sau

<script>
    $(document).ready(function(){
        $('.brToggle').click(function(){
            $container = $(this).closest('.node.level_1');
            $nodeList = $container.find('.nodeList');
            if(!$nodeList.hasClass('collapse')){
                $(this).addClass('collapse');
                $nodeList.addClass('collapse');
                $nodeList.stop(true,true).slideUp(1000, 'easeOutBounce');
            }else{
                $(this).removeClass('collapse');
                $nodeList.removeClass('collapse');
                $nodeList.stop(true,true).slideDown(1000, 'easeOutBounce');
            }
        });
    });
</script>

 

[vanphu113]

Demo: http://hvngroups.net/

 

[Cu tí siêu nhân]

Demo: http://hvngroups.net/

bác cho e xin ICQ or Y!m lâu lâu bí xin bác chỉ giáo tí

 

[vanphu113]

Bên forum tôi đấy

 

[Cu tí siêu nhân]

Gửi bác ảnh icon đóng và mở:

.nodeList .category .category_toggle_container a.toggle_arrow
{
    background: url('styles/default/xenforo/img.png') no-repeat center -180px;
    text-indent: -9999px;
    float: right;
    width: 13px;
    height: 13px;
}

.nodeList .category .category_toggle_container a.toggle_arrow.collapse
{
    background-position: center -102px;
}

Cám ơn bác nhiều, có mỗi bác là xem kỹ bài của e