1

Supondo que eu tenha 10 div class="code" no meu documento! Como faço para adicionar um botão, para que ao carregar a pagina apenas 5 desses itens fique a mostra, e os outros 5 fiquem escondidos, e após clicar no botão esses outros 5 fique também a mostra

2 Respostas 2

1

Você pode fazer da seguinte forma usando a função toggle do jQuery e o seletor lt(n) para selecionar os primeiros 5 itens:

$(function() {

  var codes = $('.code');
  var first5 = $('.code:lt(5)');
  
  codes.toggle();
  first5.toggle();

  $('#btn-show-hide').click(function() {
  
    codes.toggle();
    first5.toggle();
  
  });

});
.code {
  
  min-height: 10px;
  background: #ccc;
  margin-bottom: 5px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<input type="button" id="btn-show-hide" value="Mostrar / Esconder">

0

jquery

$(".divIDClass").hide();

javascrpt

document.getElementByClass("divIDClass").style.display = 'none';

ambos selecionados por classe

1
  • Se usares getElementByClass isso vai dar uma coleção. Tens de usar [0] para selecionar só um elemento e poderes usar o .style
    – Sergio
    Commented 21/02/2016 às 22:23

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 .