Quiero mostrar los LI que tienen una clase "oculta" cuando hago clic en el botón.
$(".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>Creo que mi Javascript es absolutamente incorrecto, soy principiante. ayúdame gracias
Estás realizando una comparación estricta === por lo que las mayúsculas y minúsculas son importantes.
if(linkText === "Show more"){
¿Qué tal eliminar la clase que oculta esos elementos?
$(".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 con algunos refactores adicionales: https://jsfiddle.net/rt0cs8jh/
Puede asignar una clase hidden a cada elemento que desee ocultar de forma predeterminada. Luego elimine esta clase o simplemente deslícela al hacer clic en el botón.
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>así es como lo escribiría
$(".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"); }; });