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
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/
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>
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");
};
});