Expand Category in MyBB within jQuery

Question

It's me again :D

As you know (or not know), MyBB using Prototype to expande forum table. But I'm coding and design a new theme for my forum NOT using the table, yup, a full div theme for MyBB.

Because of that, I can't use the already built-in expand function of MyBB which design for tables.

Here is my code for expand/collapse forum category.

Javascript :

jQuery.noConflict();

function toggleForums(catId) {
    var forumCategoryId = "#cat_" + catId;

    jQuery(forumCategoryId).click(function() {
        jQuery(this).next().toggle();
    });

    jQuery(forumCategoryId).click(function() {
        jQuery(this).toggleClass('.forum-parent collapsed').toggleClass('.forum-parent');
    });
}

The HTML (forumbit_depth_1_cat)

<a id="cat_{$forum['fid']}" href="javascript:;" class="forum-parent" onclick="toggleForums({$forum['fid']});">{$forum['name']}</a>
<div class="child-forums" name="cat_{$forum['fid']}" id="cat_{$forum['fid']}_e" style="{$expdisplay}">
<div class="forums-list">
{$sub_forums}
</div> <!-- /end forums-list -->
</div> <!-- /end child-forums -->
<span class="clear"></span>

And yes, the previous code is not worked. It will worked only if I using this jquery in the onclick event

onclick="jQuery(this).next().toggle();jQuery(this).toggleClass('.forum-parent collapsed').toggleClass('.forum-parent');"

If I use the onclick event so I can't setup the cookie to save current expandable for users.

I need your advices, guys.

Thanks in advanced!

Answer 1

Try to replace your Javascript code with this one. Hope it may help.

function toggleForums(catId) {
    var lctgCategory = "#cat_" + catId;

    if (jQuery(lctgCategory).hasClass('collapsed')) {
        jQuery.cookie("catStatus","collapsed",{expires: 365});
    } else {
        jQuery.cookie("catStatus","expanded",{expires: 365});
    }

    if (jQuery.cookie("catStatus") == "collapsed") {
        jQuery(lctgCategory).next().show();
        jQuery(lctgCategory).toggleClass('collapsed');
    } else {
        jQuery(lctgCategory).next().hide();
        jQuery(lctgCategory).toggleClass('collapsed');
    }
}