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 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

• javascript
• jquery
• html
• css

• what is the value of linkText – stackoverfloweth Commented Mar 17, 2017 at 16:54

7 Answers 7

You are performing a strict parison === 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/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./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");
    };
});

You simply nee da click handler that finds all ul li elements that have the hidden class on them, then remove it. The below code should do what youw ant.

$('.show-more a').on('click', function(){
  $('ul li.hidden').removeClass('hidden');
});

Using a selector like :gt(2) will make your code much more expandable. This selector will select all items except for the first 2. Additionally, checking for .is(":visible") is a slightly safer way of seeing what to set the text to.

Additionally, using the .toggle() can be a little abrupt, if you want to use a .slideUp() and .slideDown(), you can change your code to .slideToggle().

$("li:gt(2)").hide();

$(".show-more a").on("click", function() {
    $("li:gt(2)").toggle();
    if ($("li:gt(2)").is(":visible")) {
      $(this).html("Show less");
    } else {
      $(this).html("Show more");    
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
</ul>
<div class="show-more">
  <a href="#">Show more</a>
</div>

I would refactor this to add a parent element, then just toggle the state of this stuff through a parent class and change all the display level stuff in CSS.

var $parent = $('.parent'),
    $links = $('.show-more a');

$links.on("click", function() {
  $parent.toggleClass('more');
});

.parent .hidden, .more li {
  display: none;
}
.more .hidden {
  display: list-item;
}
a:after {
  content: 'Less';
}
.more a:after {
  content: 'More';
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li class="hidden">Ipsum</li>
  </ul>
  <div class="show-more">
    <a href="#">Show </a>
  </div>
</div>

Your first and biggest problem is that you're basing your function on un existing data so it cannot perform (your function don't know what linkText is or what is linkText value.

Secondly, you don't have to change the css properties of the "hidden" class, you can just toggleClass it from the element.

This will do the trick:

$(".show-more a").on("click", function() {
    $("ul li").toggleClass("hidden");
    if ($(this).text() == "Show more") {
        $(this).text("Show less");
    } else {
        $(this).text("Show more");
    }
});