Как сделать, чтобы начиная с n элемента li, остальные элементы скрывались?

Question

[flyming]

У меня есть список из li элементов нужно сделать так, чтобы начиная со 2 (или другого элемента), последующие элементы скрывались, а при нажатии на кнопку они открывались как dropdown.

Answer 1

[Максим Тимофеев]

lihider();

$('#someButton').on('click',lihider);

function lihider(){
  $('ul.someClass li').each(function( index, element ) {
    if(index > 1) {
       $(element).toggleClass('hideit');
    }
  });
}

в css:
.hideit {display:none;}

Answer 2

[Павел Корнилов]

<button id="ulButton" onclick="ulToggle();">Кнопка</button>
<ul id="ul1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
</ul>

<script>
var ul= document.querySelectorAll('#ul1>li'), N=3;
[].forEach.call(ul, function(i,ind) {
	if(ind>=N) {
		i.hidden=1;
	}
});
function ulToggle () {
	[].forEach.call(ul, function(i,ind) {
		if(ind>=N) i.hidden=!i.hidden;
	});
}

</script>

Answer 3

[Дмитрий]

Fiddle

Answer 4

[Stalker_RED]

https://jsfiddle.net/7v9e6d7y/

Answer 5

[Максим Федоров]

1. каждому li например с классом class="li" присвоить атрибут num_id="x",
   
2. сделать у всех li, у которых атрибут num_id> n, классclass="li-dropdown li-hidden"
   
3. сделать по клику на #btn функцию toggle для всех class="li-dropdown", которая бы убирала или добавляла всем class="li-dropdown" класс li-hidden
   

Cоответственно в стилях для .li-hidden прописать стили {display:none}
#btn -- это id у вашей кнопки