Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

107
Visualizações
Show more button

I want to show LIs which have "hidden"class when I click on button.

$(".show-more a").on("click", function() {
    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $('.hidden').css('visible', 'visible');
        $('.hidden').css('display', 'block');
    } else {
        linkText = "Show more";
        $('.hidden').css('visible', 'hidden');
        $('.hidden').css('display', 'none');
    };

    $this.text(linkText);
});
.hidden {
display: none;
visibility: hidden;
}
<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li class="hidden">Ipsum</li>
</ul>
<div class="show-more">
  <a href="#">Show more</a>
</div>

I think that my Javascript is absolutely wrong, I am beginner. Help me Thanks

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

You are performing a strict comparison === so the letter case is important.

if(linkText === "Show more"){

How about removing the class that hides those elements?

$(".show-more a").on("click", function() {
    if(linkText === "Show more"){
        linkText = "Show less";
        $('li.hidden').removeClass('hidden')
    } else {
        linkText = "Show more";
        $('li.hidden').addClass('hidden')
    };

    $this.text(linkText);
});

jsFiddle with some additional refactors: https://jsfiddle.net/rt0cs8jh/

over 4 years ago · Santiago Trujillo Relatório

0

You can assign a hidden class to every element you want to hide by default. Then remove this class or just slide it on button click.

var active = false;
$(".show-more a").on("click", function() {
  $('li.hidden').slideToggle();
  $(this).text(active ? 'Show more' : 'Show less')
  active = !active;
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li class='hidden'>Lorem</li>
  <li class='hidden'>Lorem</li>
  <li class='hidden'>Lorem</li>
  <li class="hidden">Ipsum</li>
</ul>
<div class="show-more">
  <a href="#">Show more</a>
</div>

over 4 years ago · Santiago Trujillo Relatório

0

here's how I would write it

$(".show-more a").on("click", function() {
    var currentText = $(this).text();
    if(currentText === "Show More"){
        $('.hidden').show();
        $(this).text("Show Less");
    } else {
        $('.hidden').hide();
        $(this).text("Show More");
    };
});
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda