Mostrar e ocultar items de uma lista | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Renan Cardoso Segretti

| 33.1k xp | 19 posts

Olá a todos! Estou com uma dúvida e gostaria da ajuda da comunidade para resolver.

Eu tenho uma lista com algumas dezenas de items, e o 4º item é um link para expandir os items ocultos (+40 items). Eu gostaria de que quando eu clicasse neste os 40 items aparecessem, e quando eu clicasse em no link "Ocultar", que é o último link da lista, ele voltasse ao normal, como estava antes.

<td class="podeatender" data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender">
                <div data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0">
                    <ul class="itens closed-true"
                        data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul">
                        <li class="item_0 "
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$0">Passeio</li>
                        <li class="item_1 "
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$1">Suv/pickup
                        </li>
                        <li class="item_2 "
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$2">Blindados
                        </li>
                        <li class="item_3 "
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$3">Caminhonetes
                        </li>
                        <li class="item_4 additional"
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$4">Caminhões
                            Pequenos</li>
                        <li class="item_5 additional"
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$5">Caminhões
                            Grandes</li>
                        <li class="item_6 additional"
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$6">Até Aro 20
                        </li>
                        <li class="item_7 additional"
                            data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$ul.$7">Gratuito Até
                            Aro 20</li>
                    </ul><a href="#" class="see-more"
                        data-reactid=".0.$status.$itens.$table.$body.$264.3:$264Pode atender.0.$link">+ Mais 4 itens</a>
                </div>
            </td>

Exatamente como se encontra na tabela deste site aqui:

https://www.kdpneus.com.br/lojas E gostaria de uma solução em Javascript, sem JQuery.

Será que alguém pode me ajudar? :)

3 respostas

solução!

por Steve Jamerson

| 106.2k xp | 23 posts

22/05/2019

Boa tarde,

Então, eu prefiro e gosto muito mais de utilizar JQuery.

Mas fiz um aqui bem simples mesmo para entender o que precisa fazer ai, porque se usar mais de uma lista não vai funcionar, somente com aprimoramento do código mesmo.

HTML:

  <ul class="s-more">
    <li class="s-more-items">1</li>
    <li class="s-more-items">2</li>
    <li class="s-more-items">3</li>
    <li class="s-more-items">4</li>
    <li class="s-more-items">5</li>
    <li class="s-more-items">6</li>
    <li class="s-more-items">7</li>
    <li class="s-more-items">8</li>
    <li class="s-more-items">9</li>
    <li class="s-more-items">10</li>
    <li class="s-more-items">11</li>
    <li class="s-more-items">12</li>
    <li class="s-more-items">13</li>
    <li class="s-more-items">14</li>
    <li class="s-more-items" onclick="morelist()">VEJA MAIS</li>
  </ul>
  <script type="text/javascript">
    window.onload = morelist();
  </script>

CSS:

.s-more > .s-more-items:last-child::after {
  content: " +";
}

.s-d-none{
  display: none;
}

JS:

function morelist(){
  var cont = 0;
  var items = document.querySelectorAll(".s-more-items");
  var itemsNone = document.querySelectorAll(".s-d-none");

  if (itemsNone.length > 0) {
    items.forEach(item => item.classList.remove("s-d-none"));
  }
  else {
    items.forEach(item => {
      if (cont < 4 || cont == items.length-1) {
      }
      else{
        item.classList.add("s-d-none");
      }
      cont++;
    });
  }
}

Se quiser baixar o código como fiz aqui de teste, deixei visível no github: https://github.com/SteveJamerson/forumAlura/tree/master/morelist.js

por Renan Cardoso Segretti

| 33.1k xp | 19 posts

22/05/2019

Amigo, muito obrigado mesmo!! Funcionou! Também queria usar JQuery mas a plataforma que estou usando não suporta. Mas adorei o código, entendi e achei bem simples!

Agora a questão é que eu tenho várias dessas listas na minha tabela. Como eu faço pra aprimorar o código como você mencionou?

por Steve Jamerson

| 106.2k xp | 23 posts

22/05/2019

Boa noite,

Beleza?

Estou um pouco sem tempo devido a um projeto, mas assim, vou deixar só o link do github onde subi um código para varias listas, espero que ajude ai.

https://github.com/SteveJamerson/forumAlura/tree/master/moremultlist.js