Show and hide images list with jquery

Asked

Viewed 118 times

0

A list of images displays 12 images, first 6 images are displayed and a button when being clicked displays 6 more images, how do I do this effect using jquery ? I tried the code below but it didn’t work.

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>
javascript jquery

1 answer

1


You can use the . Hide() and . show() functions of jQuery

About the function . Hide() and . show():

You said you wanted 6 images to appear and a "Show More" button, when clicked, this button would show 6 more product images on the screen.

Using your code, I inserted the "panel" class into the "ol" tag and used a part of your css to load the hidden images, put an id on your button (btnMosrarMos) and used the mentioned functions to show the images and hide the button after clicked. The code would basically look like this:

$('#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" />

  • Thank you so much ! And to hide again without hiding the button ?

  • Luis, here’s what you asked for: https://codepen.io/LeoCardosoJr/pen/oOjxbM

  • Very good, thank you !

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.