How to hide extra elements?

Question

JavaScript

The organization has multiple phones

<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>

It is necessary to leave two phones, and hide the rest, and write View more, so that you can see the rest if you wish.
So how do you organize it better?
On the server, after the second iteration, mark phones as hidden.
Or, on the javascript client, count the number of elements with the phone class, and also hide the extra ones.
Or, can you suggest another more elegant way?

Answer 1

Mark as hidden - on the server, show - through js. Also, if support for older browsers is not of great importance to you, you can get by with just js (show) + css (hide, use nth-of-child).

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

Using JS for hiding is a bad idea, because elements will be visible until the scripts are executed (there may be flickering and other troubles).

Answer 2

you can name the classes differently, for example phone, phone1, etc. and do .hide()

Answer 3

add the class "hidden" to hidden numbers, for example, with hiding via CSS. Well, and then using JS, remove the class when you click on "more"

Answer 4

Hide everything except the first one, show all when hovering over the parent block, or show everything when clicking on the icon.
Please describe your requirements in more detail.