Adapt button display more Ivs to hide the displayed Ivs

Question

I have a session that has many cards and they are displayed by clicking the button to load more that displays 4 in 4 as shown in my script:

JS:

$(function () {
            "use strict";
            $('.card-actives').slice(0, 1).css("display","flex");

            $('#loadmore').on('click', function (e) {
                e.preventDefault();
                $('.card-actives:hidden').slice(0, 2).css("display","flex");
                if ($('.card-actives:hidden').length === 0) {
                    $('#loadmore').replaceWith("<p class='p'>Sem mais</p>");
                }
            });
        });

Knob:

<a href="#." class="btn-outline-green d-inline-block mt-4" id="loadmore">Carregar mais</a>

CSS:

.card-actives {
        display: none;
    }

i need to create now a button that hides this information when clicking on it would be a button called show less how I can adapt this code so that when click on see more expand more information and when click on show less go hiding

Answer 1

Just one remark: Your script does not show 4 in 4, but 2 in 2, because of the .slice(0, 2).

What you can do is create another "Press Less" button similar to the "Press More" button and put an id on it:

<a href="#." class="btn-outline-green d-inline-block mt-4" id="loadless">Carregar menos</a>

And instead of using $('#loadmore').replaceWith("<p class='p'>Sem mais</p>"); to replace the button #loadmore, put this paragraph after the button #loadmore directly in HTML and before the button #loadless:

<a href="#." class="btn-outline-green d-inline-block mt-4" id="loadmore">Carregar mais</a>
<p class='p' id='semmais'>Sem mais</p>
<a href="#." class="btn-outline-green d-inline-block mt-4" id="loadless">Carregar menos</a>

And hide the "No more" paragraph and the button #loadless in the CSS:

#loadless, #semmais{
   display: none;
}

Then you can apply the click event on the two buttons: "show more" and "show less" at the same time, making a if to differentiate when one or the other was clicked, and control the display of each with .show() or .hide(), according to the amount you want (I put the quantity in the variable mostrar):

$(function () {
   "use strict";
   
   $('.card-actives').slice(0, 1).css("display","flex");
   var mostrar = 4; // quantos quer mostrar e esconder

   $('#loadmore, #loadless').on('click', function (e) {
      e.preventDefault();
      
      if(this.id == "loadmore"){
      
         $('#loadless').show(); // exibe o botão "mostrar menos"
         
         // mostra mais 4 cards
         $('.card-actives:hidden').slice(0, mostrar).show();
         
         // se não houver mais nenhum card escondido
         // esconde o botão "loadmore" e mostra o "sem mais"
         if (!$('.card-actives:hidden').length) {
            $('#loadmore').hide();
            $('#semmais').show();
         }
      }else{
         // esconde os últimos 4 cards visíveis
         $('.card-actives:visible').slice(-mostrar).hide();
         
         // se não houver nenhum card visível
         // esconde o botão "mostrar menos"
         if (!$('.card-actives:visible').length) {
            $('#loadless').hide();
         }
         
         // se houver pelo menos um card escondido
         // mostra o botão "loadmore" e esconde o "sem mais"
         if($('.card-actives:hidden').length){
            $('#loadmore').show();
            $('#semmais').hide();
         }
         
      }
   });
});

/* a classe abaixo é só para ilustrar os cards */
.card-actives{
   width: 50px;
   height: 20px;
   background: red;
   margin: 5px;
   display: none;
}

#loadless, #semmais{
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <div class="card-actives">1</div>
   <div class="card-actives">2</div>
   <div class="card-actives">3</div>
   <div class="card-actives">4</div>

   <div class="card-actives">5</div>
   <div class="card-actives">6</div>
   <div class="card-actives">7</div>
   <div class="card-actives">8</div>

   <div class="card-actives">9</div>
   <div class="card-actives">10</div>
   <div class="card-actives">11</div>
   <div class="card-actives">12</div>
</div>
<a href="#." class="btn-outline-green d-inline-block mt-4" id="loadmore">Carregar mais</a>
<p class='p' id='semmais'>Sem mais</p>
<a href="#." class="btn-outline-green d-inline-block mt-4" id="loadless">Carregar menos</a>