常见问题显示/隐藏扩展答案

时间:2013-03-11 14:14:28

标签: javascript show-hide expand

我有12个常见问题解答列表,但我只想显示前5个,直到用户点击“显示更多”按钮。我得到了那个部分,但是这样做它扩展了它显示的新7个FAQ的答案。我希望隐藏答案直到用户点击问题,但我不确定如何去做。我正在修改其他人的代码,我最初没有写它。

实施例: [代码] http://63.246.25.145/surety-bonds/contract-bonds/performance_bond.htm [/代码]

JS: [码] //常见问题解答扩展

$("#faqs .question").click(function()
{
    if($(this).hasClass("open"))
    {
        $(this).removeClass("open");
        $("#answer_"+$(this).attr("id").split("_")[1]).slideUp().removeClass("open")
    }
    else
    {
        $("#faqs .question.open").removeClass("open");
        $("#faqs .answer.open").slideUp().removeClass("open");
        $(this).addClass("open");
        $("#answer_"+$(this).attr("id").split("_")[1]).slideDown().addClass("open")
    }
});

//债券页面常见问题显示/隐藏

$("#faqlistholder5").each(   //count 10 since question <li>s and answer <li>s
    function()
    {
        var f=$("ul",this);

        if(f.children("li").size()<=10)
            return;

        var u=f.children("li:gt(9)",this).hide();
        var m="VIEW MORE &raquo";

        f.append($('<div id="viewMore" class="toggler"><a id="viewmorebuttonFAQ" class="button">'+m+"</a></div>").toggle(
            function()
            {
                u.show();
                $("#viewmorebuttonFAQ").html("VIEW LESS &raquo")
            },
                function()
                {
                    u.hide();$("#viewmorebuttonFAQ").html("VIEW MORE &raquo")
                }))
    });

[/代码]

有人能为我提供一些急需的指导吗?

1 个答案:

答案 0 :(得分:0)

尝试添加

$("#faqs .answer").hide().removeClass("open");
um.show();

之后


function()
        {
            u.show();
            $("#faqs .answer").hide().removeClass("open");
            $("#viewmorebuttonFAQ").html("VIEW LESS &raquo")
        }