Clever Geek Handbook

JQuery show hide with unordered list: need to add dynamic text / hide function

I have an unordered list where I hide any additional list items if greater than 3. Then I call a JQuery function that puts a show more link at the bottom and toggles any additional list items to show.

However, I'm a bit stuck, I would like to convert the show link to "Hide" where all the list items are shown and clicked on that and then hide the additional list items and then the link changes to "Show more ..." again.

Here is the code I have so far that works to expand and display additional list items.

 $('ul li:gt('+index+')').hide();
    $('ul').append('<li class="more"><a href="#">Show more...</a></li>');
    $('ul li.more a').click(function() {
    $('ul li.more a').remove();
    $('ul li:gt('+index+')').show();
    });

Note. I don't get hung up on this code, if there is a better way to implement all the show / hide code, that's fine.

I wrote a fiddle code that I have so far.

+3


source to share


2 answers


This is where the jquery function toggle()

comes in handy - you can attach to event handlers that will be called every other time element. Use text()

to change the text of the link (which should be a link, if you don't plan on using a fallback - use a range)



Updated fiddle .

+3


source


There you go sir :) Fixed and works well!



http://jsfiddle.net/TQXQD/7/

+3


source






More articles:


All Articles