jquery - jQueryの折りたたみ/拡張セクション

Question

編集：更新されたコード

このサイトにアクセスした場合：http： //dream-portal.net

次の画像が表示されます。

このコードを動作させることができません...

global $context, $options;
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oTd;
function collapse_expand(which)
{
    var type = which.substr(2);
    var type_lower = type.toLowerCase();
    switch (type)
    {
        case "Left":
            oTd = $(".tablecol_0").eq(3);
            break;
        case "Right":
            oTd = $(".tablecol_2").eq(0);
            break;
        case "Top":
            oTd = $(".tablecol_0").eq(1);
            break;
        default:
            oTd = NULL;
            break;
    }

    if (!oTd)
        return;

    oTd.slideToggle("slow", "linear", function(){
        var oNum = !$(this).is(":visible") ? 1 : 0;
        var colExp = oNum == 1 ? "Expand" : "Collapse";
        $("#" + type_lower + "side").text(colExp + " " + type);';
        if ($context['user']['is_guest'])
            echo '
                document.cookie = which + "Collapse=" + oNum;';
        else
            echo '
                smf_setThemeOption(which + "Collapse", oNum, null, "' . $context['session_id'] . '");';
        echo '
    });
}';

$show = array(
    'left' => $context['user']['is_guest'] ? empty($_COOKIE["dpLeftCollapse"]) : empty($options["dpLeftCollapse"]),
    'right' => $context['user']['is_guest'] ? empty($_COOKIE["dpRightCollapse"]) : empty($options["dpRightCollapse"]),
    'top' => $context['user']['is_guest'] ? empty($_COOKIE["dpTopCollapse"]) : empty($options["dpTopCollapse"])
);

if (!$show['left'] || !$show['right'] || !$show['top'])
{
    echo '
    function SBVars()
    {
        $(document).ready(function(){';

            if (!$show['left'])
            echo '
                $(".tablecol_0").eq(3).hide();
                $("#leftside").text("Expand Left");';
            if (!$show['right'])
            echo '
                $(".tablecol_2").eq(0).hide();
                $("#rightside").text("Expand Right");';
            if (!$show['top'])
            echo '
                $(".tablecol_0").eq(1).hide();
                $("#topside").text("Expand Top");';
        echo '
        });
    }

    if (!document.addEventListener("DOMContentLoaded", SBVars, false))
        addLoadEvent(SBVars);';
}
echo '

// ]]></script> 

<div style="width: 100%;"><div id="rightside" class="button_submit" style="float: right;" onclick="javascript:collapse_expand(\'dpRight\');">Collapse Right</div><div id="leftside" class="button_submit" style="float: left;" onclick="javascript:collapse_expand(\'dpLeft\');">Collapse Left</div><div id="topside" class="button_submit" style="text-align: center; width: 100px; margin: 0 auto;" onclick="javascript:collapse_expand(\'dpTop\');">Collapse Top</div><div style="clear: both;"></div></div>';

phpで書かれていますが、jQueryコードは機能するはずです。理由がわかりません。私が見ることができるコンソールエラーはありません。アニメーション効果でセクションを拡大/折りたたみたいだけです...これは可能ですか？もちろん、私はゲスト用のCookieを使用して、ページが更新されても折りたたまれたままになるように設定しています。

スムーズなアニメーションを得るには、slideToggle関数内で何らかのステップを使用する必要があると思いますか？もしそうなら、どのように？ここで本当に助けが必要です。