Как скрыть лишнее количество элементов?

Question

[kapai69]

У организации есть несколько телефонов

<span class="phone">8 [phone]</span>
<span class="phone">8 [phone]</span>
<span class="phone">8 [phone]</span>
<span class="phone">8 [phone]</span>
<span class="phone">8 [phone]</span>
<span class="phone">8 [phone]</span>

Надо оставить два телефона, а остальные скрыть, и написать Посмотреть еще, что бы при желании посмотреть остальные.
Вот думаю как организовать лучше?
На сервере, после второй итеррации, помечать телефоны как скрытые.
Или на клиенте javasript'om считать количество элеметнов с классом phone, и также скрывать лишние.
Или, может подскажите еще вариант по элегантнее?

Answer 1

[Алексей Николаев]

Помечать как скрытые - на сервере, показывать - через js. Также, если поддержка старых браузеров для вас не имеет большого значения, можно обойтись только js (показывать) + css (скрывать, используйте nth-of-child).

.phone:nth-of-child(2n+1) {
   display:none;
}

Использовать JS для сокрытия плохая идея, т.к. элементы будут видны, пока не исполнятся скрипты (может быть мелькание и прочие неприятности).

Answer 2

[smoklew]

можно назвать классы по разному к примеру phone,phone1 и т.д. и сделать .hide()

Answer 3

[Роман]

скрытым номерам добавить класс "hidden" например, со скрытием через CSS. НУ а потом с помощью JS убирать клас при нажатии на "подробнее"

Answer 4

[Саша Ткаченко]

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