单击后显示隐藏的更多按钮

Question

我有一个不错的脚本，可以在单击按钮后显示更多内容。这个按钮点击后需要隐藏

这是我目前的情况：

 $(function() {
        $(".btn-down").next().hide().append('<a href="javascript:void();" class="btn-up">Show less</a>');

        $(".btn-down").click(function() {
            $(this).next().slideToggle();
        });

        $(".btn-up").click(function() {
            $(this).parent().slideUp();
        });
    });

我的 JSFiddle； https://jsfiddle.net/w5n7zkwu/5/

另一种方法是在点击后更改按钮文本并将其放在隐藏文本下方。

我很接近，但不知道如何解决这个问题..

Answer 1

在.next()之前添加.hide()

$(".btn-down").click(function() {
        $(this).hide().next().slideToggle();
     });

再次显示您的 "show more" 按钮 $(".btn-down").show(); here

$(".btn-up").click(function() {
    $(this).parent().slideUp();
    $(".btn-down").show();
});

单击后显示隐藏的更多按钮

Show more button hidden after click

javascript

toggle