0

Uma lista de imagens exibe 12 imagens, primeiramente são exibidas 6 imagens e um botão ao ser clicado exibe mais 6 imagens, como faço esse efeito usando jquery ? tentei o código abaixo mas não funcionou.

CSS :

.painel li:nth-child(n+7) {
display:none;
}

.painel-aberto li:nth-child(n+7) {
display: inline-block;
}

Jquery :

$('.novidades button').click(function() { 
 $('.novidades').addclass('painel-aberto');
});

$('.novidades button').click(function() {
 $('.novidades').toggleClass('painel-aberto');
});

HTML :

 <section class="painel novidades">

   <h2>Novidades</h2>

    <ol>

     <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura1.png" alt="miniatura1">
    <figcaption>Blusa Estranha </br> por<b> R$ 129,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>  
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura2.png" alt="miniatura1">
    <figcaption> Camisa Azul </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura3.png" alt="miniatura1">
    <figcaption> Blusa Verde </br> por <b> R$ 59,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura4.png" alt="miniatura1">
    <figcaption> Jaqueta Bordô </br> por <b> R$ 129,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura5.png" alt="miniatura1">
    <figcaption> Fisica Azul </br> por <b> R$ 39,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura6.png" alt="miniatura1">
    <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura7.png" alt="miniatura1">
    <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

     <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura8.png" alt="miniatura1">
    <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

     <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura9.png" alt="miniatura1">
    <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura10.png" alt="miniatura1">
    <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

    <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura11.png" alt="miniatura1">
    <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

     <li>
  <a href="produto.html">
   <figure>
         <figcaption class="compre"> Compre </b></figcaption>
    <img src="img/produtos/miniatura12.png" alt="miniatura1">
    <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
   </figure>
  </a>
 </li>

    </ol>

    <input type="button" value="Mostrar Mais" />

   </section>
0

1 Resposta 1

1

Você pode utilizar as funções .hide() e .show() do jQuery

Sobre a função .hide() e .show():

Você disse querer que aparecesse 6 imagens e um botão de "Mostrar Mais", ao ser clicado, este botão iria mostrar mais 6 imagens de produtos na tela.

Utilizando o seu código, inseri a classe "painel" na tag "ol" e utilizei uma parte do seu css para carregar as imagens escondidas, coloquei um id no seu botão (btnMosrarMais) e utilizei as funções mencionadas para mostrar as imagens e esconder o botão após clicado. O código ficaria basicamente, assim:

$('#btnMosrarMais').click(
   		function() { 
	   		$('.painel li').show(); 
			$('#btnMosrarMais').hide(); 
		}
	);
.painel li:nth-child(n+7) { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Novidades</h2>
<ol class="painel">
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption>Blusa Estranha </br> por<b> R$ 129,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Camisa Azul </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Blusa Verde </br> por <b> R$ 59,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Jaqueta Bordô </br> por <b> R$ 129,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Fisica Azul </br> por <b> R$ 39,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
   <li>
      <a href="produto.html">
         <figure>
            <figcaption class="compre"> Compre </b></figcaption>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Pictograms-nps-misc-trucks-2.svg/384px-Pictograms-nps-misc-trucks-2.svg.png" alt="miniatura1">
            <figcaption> Vestido Rosa </br> por <b> R$ 49,90 </b></figcaption>
         </figure>
      </a>
   </li>
</ol>
<input type="button" id="btnMosrarMais" value="Mostrar Mais" />

3

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