I want to ensure that only a maximum of 3 elements are visible on the screen at all times. If one element is removed, the next in line should take its place until there are no more elements left.
Take a look at this 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>
Below is the code that seems to work best for this situation:
$('.info-mob').on('click', () => {
$('#mob-keys-container').toggle();
$('#mob-keys-container').children().slice(0, 3).show();
});
The '.info-mob' function reveals a tab containing all the elements while ensuring that only a maximum of 3 elements are displayed at any time. Although it works well when reopening the tab, I need it to be more dynamic and consistently display a maximum of 3 elements even if new ones are added with a different function.