jQuery change append onClick

Question

I have the following jQuery code which locates the ul element on the page, hides any li items after the third item within that ul element and appends a "Show More!" text link which reveals/toggles the hidden list items when clicked.

$('ul')
    .find('li:gt(2)')
    .hide()
    .end()
    .append(
        $('<li>Show More!</li>').click( function(){
        $(this).siblings().toggle(500);
        })
    );

An example of the script's functionality: http://jsfiddle.net/vf6j5/

Here's what I'd like the script to do: When the hidden elements are revealed after "Show More!" is clicked, I'd like the "Show More!" text to be replaced with "Show Less!". Doing this would be much more user friendly and make a bit more sense.

Any ideas on how this could be accomplished?

possible duplicate of Button text toggle in jquery

epascarello
– epascarello

2012-12-28 18:30:01 +00:00
Commented Dec 28, 2012 at 18:30 — epascarello
– epascarello, Commented Dec 28, 2012 at 18:30

WooCaSh · Accepted Answer · 2012-12-28 18:29:18Z

5

Look on this:

$('ul')
        .find('li:gt(2)')
         .hide()
        .end()
        .append(
            $('<li class="title">Show More!</li>').click( function(){
            $(this).siblings().toggle(500);
                $(".title").html() === "Show More!"
                    ? $(".title").html("Show Less!")
                    : $(".title").html("Show More!")

            })
        );

Worked code

answered Dec 28, 2012 at 18:29

WooCaSh

5,2225 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shmiddty Over a year ago

and if there are more than one .title elements?

WooCaSh Over a year ago

Then we need change code. In this case that code work well. If you need help show me your example of problem.

Shmiddty Over a year ago

The simple fact that you'd have to change it based on external elements shows that this solution is bad.

Shmiddty · Accepted Answer · 2012-12-28 18:29:08Z

5

http://jsfiddle.net/vf6j5/2/

$('ul')
    .find('li:gt(2)')
    .hide()
    .end()
    .append(
        $('<li>Show More!</li>').click(function() {
            var txt = $(this).text() == "Show More!" ? "Show Less!" : "Show More!";
            $(this).text(txt).siblings(':gt(2)').toggle(500);
        })
    );

answered Dec 28, 2012 at 18:29

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

1 Comment

Shmiddty Over a year ago

This is the only answer that toggles only the "extra" items, and doesn't toggle the first 3.

Ram · Accepted Answer · 2012-12-28 18:27:23Z

4

$('ul').find('li:gt(2)').hide().end().append(
$('<li>Show More!</li>').click(function() {
    var $this = $(this);
    $this.siblings().toggle(500);
    $this.text(function(i, t) {
        return t === 'Show More!' ? 'Show Less!' : 'Show More!'
    })
}));

http://jsfiddle.net/aGeMp/

answered Dec 28, 2012 at 18:27

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

adeneo · Accepted Answer · 2012-12-28 18:29:58Z

3

$('ul').find('li:gt(2)')
       .hide()
       .end()
       .append(
         $('<li>Show More!</li>').click(function() {
            $(this).text($(this).prev('li').is(':visible') ? 'Show More' : 'Show Less')
                   .siblings().toggle(500);
         })
       );

FIDDLE

answered Dec 28, 2012 at 18:29

adeneo

319k29 gold badges409 silver badges392 bronze badges

Comments

Charles Wyke-Smith · Accepted Answer · 2012-12-28 18:26:16Z

0

Pretty simple - select the element you want to change and modify its text

$('#myButton').text('Show Less!');

answered Dec 28, 2012 at 18:26

Charles Wyke-Smith

2,5373 gold badges18 silver badges16 bronze badges

Comments

Niet the Dark Absol · Accepted Answer · 2012-12-28 18:27:07Z

0

Since you already have this in the click event, just call .text() on it:

.... .click(function() {
  var that = $(this);
  that.siblings().toggle(500);
  that.text("Show less!");
});

answered Dec 28, 2012 at 18:27

Niet the Dark Absol

326k85 gold badges478 silver badges603 bronze badges

Collectives™ on Stack Overflow

jQuery change append onClick

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related