0

Possuo uma sessão que possui muitos cards e eles são exibidos ao clicar no botão carregar mais que exibe de 4 em 4 como mostra meu 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>");
                }
            });
        });

Botão:

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

CSS:

.card-actives {
        display: none;
    }

eu preciso criar agora um botão que esconda essas informações ao clicar nele seria um botão chamado mostrar menos como posso adaptar esse código de modo que quando clique em ver mais vá expandindo mais informações e quando clicar em exibir menos ir escondendo

1 Resposta 1

3

Só uma observação: O seu script não mostra de 4 em 4, e sim de 2 em 2, por causa do .slice(0, 2).

O que você pode fazer é criar um outro botão "Carregar menos" semelhante ao botão "Carregar mais" e colocar um id nele:

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

E em vez de usar $('#loadmore').replaceWith("<p class='p'>Sem mais</p>"); para substituir o botão #loadmore, coloque esse parágrafo após o botão #loadmore direto no HTML e antes do botão #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>

E esconda o parágrafo "Sem mais" e o botão #loadless no CSS:

#loadless, #semmais{
   display: none;
}

Em seguida você pode aplicar o evento de click nos dois botões: "mostrar mais" e "mostrar menos" ao mesmo tempo, fazendo um if para diferenciar quando um ou outro foi clicado, e controlar a exibição de cada um com .show() ou .hide(), de acordo com a quantidade que quer (coloquei a quantidade na variável 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .