0

I need only max 3 elements to appear on the screen at all times and if one of them is removed, then the next in line takes its place and so on till the are no elements.

Here is the code snippet:

<div class="mob-keys-container" id="mob-keys-container">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_1_mob" src="./images/5.1.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_2_mob" src="./images/5.2.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_3_mob" src="./images/5.3.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_4_mob" src="./images/5.4.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_5_mob" src="./images/5.5.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_6_mob" src="./images/5.6.png" alt="key">

 </div>

And here is the best code that kinda works:

$('.info-mob').on('click', () => {
        $('#mob-keys-container').toggle();
        $('#mob-keys-container').children().slice(0, 3).show();
    });

.info-mob opens a tab that contains all the elements and while it's open there should be max 3 elements. Everything works fine if I close and open up again that tab but I need it to be more dynamic and always be max 3 elements even if I append one with different function.

Ediny
  • 1
  • Does this answer your question? [How to display the first 3 list items and hide the rest with CSS nth-child?](https://stackoverflow.com/questions/11851395/how-to-display-the-first-3-list-items-and-hide-the-rest-with-css-nth-child) – Heretic Monkey May 09 '22 at 13:49

1 Answers1

0

I think this will solve your issue with help of CSS

#mob-keys-container *{
  display:none;
}

#mob-keys-container *:nth-child(-n+3){
  display:block;
}
anubhav solanki
  • 1
  • 2