Как добавить надпись «Показать еще»?

Question

[Дмитрий]

Добрый вечер. Есть список:

<ul class = "checkbox">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Есть обработчик:

// Спойлер для списков фильтра
$('ul.checkbox').each(function(){
	$(this).find('li:gt(9)').hide();
	if ($(this).find('li').length > 10) {
		$(this).append('<div class = "btn gray see-more" title = "">Показать еще</div>');
	}
})
$('div.see-more').click(function(){
	var ul = $(this).parent();
	// ul.find('li:hidden:lt(99)').show();
	ul.find('li:gt(9)').slideToggle();
	ul.find('li:hidden:lt(99)').slideToggle();
	if (ul.find('li.hidden').length == 0) {
		$(this).html('Скрыть');
	}
})

Он скрывает пункты списка под спойлер, если их больше 10 и выводит кнопку "Показать еще". При нажатии список раскрывается и надпись меняется на "Скрыть". Но при скрытии списка надпись обратно не меняется. Помогите исправить. Спасибо.

Answer 1

[gleendo]

Demo

Answer 2

[Ridz]

// Спойлер для списков фильтра
var maxLi = 10, text = ["Скрыть", "Показать еще"];
$("ul.checkbox").each(function() {
    var li = $(this).find("li");
    if (li.length > maxLi) {
        li = li.slice(maxLi).hide();
        var btn = $("<div>", {
            text: text[1],
            "class": "btn gray see-more",
            click: function() {
                li.stop().slideToggle(500, function() {
                    btn.text(text[+$(this).is(":hidden")])
                })
            }
        }).appendTo(this)
    }
});

Answer 3

[Павел]

$('ul.checkbox') ... $(this).append и $('div.see-more').click ... $(this).html( не как не связанные вещи

Answer 4

[Кирюшка Цисарь]

if (ul.find('li.hidden').length == 0) {
    $(this).html('Скрыть');
  }else{
    $(this).html('Показать ещё');
}

?