向用户界面添加slidedown/slideup jQuery功能

下面你会找到我的js。代码，该代码在运行时显示在下面的附加图像视图中。 我拼命想弄清楚如何以这种方式在接口中实现它 我基本上是在尝试构建一个界面，这样当用户单击电子邮件信息的任何位置时（第一个表格-邮件在标题中），有关历史的信息就会向下/向上滑动

欢迎提出任何建议！谢谢你抽出时间！如果我遗漏了对此事有益的信息，请不要问

if (tab == "crm") {
    content = "";
    counter = 1;
    $.each(data.response, function(i, y) {
        $("div#userBox_" + id + " div#" + tab + "File").html(content);
        content = "<table class='crmTable'><tr><th colspan='3'>" + "<a href='mailto:" + y.email.email + "'>" + y.email.email + "</a></th></tr>";
        if (y.email.valid == "1") {
            valid = "<td class='value'><span style='color: green'>Yes</span></td>";
        }
        else {
            valid = "<td class='value'><span style='color: red'>No</span></td>";
        }
        content += "<tr class='even'><td class='key'>Valid e-mail:</td><td class='value'>" + valid + "</td></tr>";

        if (y.email.reason == null) {
            reason = "<td class='value'><span style='color: green'>N/A</span></td>";
        }
        content += "<tr class='odd'><td class='key'>Reason</td><td class='value'>" + reason + "</td></tr>";
        content += "<tr class='even'><td class='key'>Confirmed at</td><td class='value'><td class='value'>" + y.email.confirmed_at + "</td></td></tr>";
        if (y.email.email.contact_email == "1") {
            contact = "<td class='value'><span style='color: green'>Yes</span></td>";
        }
        else {
            contact = "<td class='value'><span style='color: red'>No</span></td>";
        }
        content += "<tr class='odd'><td class='key'>Contact </br> e-mail</td><td class='value'>" + contact + "</td></tr>";

        if (y.email.login_email == "1") {
            login = "<td class='value'><span style='color: green'>Yes</span></td>";
        }
        else {
            login = "<td class='value'><span style='color: red'>No</span></td>";
        }
        content += "<tr class='even'><td class='key'>Users login </br> e-mail</td><td class='value'>" + login + "</td></tr>";
        content += "<tr class='odd'><td class='key'>Users Id</td><td class='value'><td class='value'>" + y.email.users_id + "</td></td></tr>";

        $.each(y.history, function(ii, z) {
            if (z.contactBrand == "B") type = "Book";
            else {
                type = "Journal"
            }
            content += "<table class='crmTable'><tr><th colspan='3'>History " + counter + "</th></tr>";
            content += "<tr class='even'><td class='key'><b>Contact Role</b></td><td class='value'><td class='value'>" + z.contactRole + "</td></td></tr>";
            content += "<tr class='odd'><td class='key'>Contact Project</td><td class='value'><td class='value'>" + z.contactProject + "</td></td></tr>";
            content += "<tr class='even'><td class='key'>Contact Brand</td><td class='value'><td class='value'>" + type + "</td></td></tr>";
            counter++
        });
    });

    $("div#userBox_" + id + " div#" + tab + "File").append(content);
    $("div#userBox_" + id + " div#" + tab + "File").append("</table>");

}
}, "json");

if（tab==“crm”）{
content=“”；
计数器=1；
$.each（数据、响应、函数（i、y）{
$（“div#userBox"+id+“div#”+tab+“File”）.html（内容）；
content=“”+”；
如果（y.email.valid==“1”）{
valid=“是”；
}
否则{
valid=“否”；
}
内容+=“有效电子邮件：“+Valid+”；
如果（y.email.reason==null）{
原因=“不适用”；
}
内容+=“原因”+原因+”；
内容+=“在“+y.email.Confirmed_at+”处确认”；
如果（y.email.email.contact_email==“1”）{
联系人=“是”；
}
否则{
联系人=“否”；
}
内容+=“联系人”
电子邮件“+联系人+”；
如果（y.email.login_email==“1”）{
login=“是”；
}
否则{
login=“否”；
}
内容+=“用户登录”
电子邮件“+登录+”；
content+=“Users Id”+y.email.Users_Id+”；
$。每个（y.历史记录，功能（ii，z）{
如果（z.contactBrand==“B”）type=“Book”；
否则{
type=“日记账”
}
内容+=“历史记录”+计数器+”；
内容+=“联系人角色”+z.contactRole+“”；
内容+=“联系人项目”+z.contactProject+“”；
内容+=“联系人品牌”+类型+”；
柜台++
});
});
$（“div#userBox”+id+“div#”+tab+“File”）.append（content）；
$（“div#userBox”+id+“div#”+tab+“File”）.append（“”）；
}
}“json”）；

使用jQuery ui手风琴

---

或者找到这把小提琴

我自己也在看这些例子……我甚至在问题中提到过（同一把小提琴），但我仍然不明白。