无序列表按钮，用于显示更多/更少在第二个列表上不起作用

Question

The show less/more button (for more than 10 items) is only working for the first and third unordered list. On the second UL (also the fourth, if added) the button does nothing. I can't seem to figure out why.

HTML:

<ul class="tijdlijn-list">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
</ul>

<ul class="tijdlijn-list">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
</ul>

<ul class="tijdlijn-list">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
</ul>

Jquery script:

$('.tijdlijn-list').each(function(){
var max = 10;
if ($(this).find('li').length > max) {
    $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><div class="show_more">Toon alles</div></li>');
    $('.sub_accordian').click( function(){
        $(this).siblings(':gt('+max+')').toggle();
        if ( $('.show_more').length ) {
            $(this).html('<div class="show_less">Toon minder</div>');
        } else {
            $(this).html('<div class="show_more">Toon alles</div>');
        };
    });
};
});

Answer 1

I think your problem is that you have $(this) inside onclick event that's not triggering correctly. You can try using

$(this).find('.sub_accordian').click( function(){

So $(this).find('.sub_accordian').click( function(){ instead of ('.sub_accordian').click( Here is an example: https://jsfiddle.net/wa12rvgg/2/