Без HTML тут сходу и не разобраться что нужно, но ясно одно, код нужно переписывать, слишком много ненужных манипуляций.
Update:
На сколько я понял, у вас есть меню с элементами. Если элементов больше maxCountShow, то мы их скрываем и показываем кнопку "Показать больше".
Я бы сделал через css скрытие (такую задачу по моему можно всю сделать через css):
https://jsfiddle.net/xj8s68ws/1/CSS.fold {
display: none;
}
HTML<ul class="main-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
JavaScriptfunction Folding() {
var maxShowCount=7,
main_menu=document.querySelector('.main-menu'),
items= (main_menu) ? main_menu.querySelectorAll('li') : false,
i,
show_more,
fold=0;
if (!items) return;
for (i in items) {
if (i >= maxShowCount) {
items[i].className='fold';
fold++;
}
}
if (fold) {
show_more=document.createElement('a');
show_more.appendChild(document.createTextNode('Показать больше'));
main_menu.appendChild(show_more);
show_more.addEventListener("click", show_all);
}
function show_all(e) {
var fold_items=main_menu.querySelectorAll('.fold'),
a;
show_more.removeEventListener("click", show_all);
e.target.remove();
for (a in fold_items) {
fold_items[a].className='';
}
};
}
Folding();