Shorten lists with jQuery

Question

How to add a function for hide / show elements in a list?

For example, we have several lists. When we click on the "show" link, all elements of the list are displayed; when we click on the "Hide" link, we hide elements in the list with an index greater than 3.

<div class="filter_item"> ... <h3>Network Name:</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> ... </div> 

and js code

 <script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function($){ $('.filter_item ul').each(function(){ $('li:gt(2)', this).hide(); if ($(this, 'li').children().length > 3) { $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>'); } }); $('.tr_more').toggle(function(){ $(this).closest('li').siblings().show(); $(this).attr('class', 'tr_less').text("Less..."); }, function(){ ???? }); }); //]]> </script> 

How to implement hidden objects when we click the "Hide" link?

Answer 1

Although this seems too complicated, this will work for you:

 $(this).closest('ul').children('li:gt(2):not(:last)').hide(); 

First, it searches for the parent <ul> , and then hides the child element of <li> s, but leaves the parent element of the Show / Hide link.

Transition from $(this).closest('li').prevAll().slice(2).hide(); It didn’t work very well - it hid the first nodes, not the last. prevAll seem to return elements in reverse order.

Answer 2

Instead of showing and hiding each element separately, you can add a class to li elements after the first three, and then use CSS to show and hide them by adding the class to the parent ul element:

JavaScript:

 $(function(){ $('.filter_item ul') .addClass('hidemore') .each(function(){ $(this).find('li:gt(2)').addClass('more'); }) .append($('<li/>').append($('<a/>').attr('href','javascript:void(0)').text('more...'))) .find('a').toggle(function(){ $(this).text('less...').closest('ul').removeClass('hidemore'); },function(){ $(this).text('more...').closest('ul').addClass('hidemore'); }); }); 

CSS

 .filter_item ul.hidemore li.more { display: none; } 

Notes:
The href attribute with javascript:void(0) added to the links so that they appear as links but do not move anywhere. Therefore, click handlers should not stop the event.

.find('a') after adding elements occurs because it does not work to add click event handlers to elements until they are added to the page. (If the text in the lists also contains links, you need to add a class to the added links so that they can be targeted specifically at this stage.)

Answer 3

The final code is as follows

 jQuery(document).ready(function($){ $('.filter_item ul').each(function(){ $('li:gt(2)', this).hide(); if ($(this, 'li').children().length > 3) { $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>'); } }); $('.tr_more').toggle(function(){ $(this).closest('li').siblings().show(); $(this).attr('class', 'tr_less').text("Less..."); }, function(){ $(this).closest('ul').children('li:gt(2):not(:last)').hide(); var curr_ul_y_pos = $(this).closest('ul').prev().offset().top; $('html:not(:animated), body:not(:animated)').animate({ scrollTop: curr_ul_y_pos-5 }, 'normal'); $(this).attr('class', 'tr_more').text("More..."); }); }); 

Added forgotten attributes after hide event. Now the page scrolls to the position of the h3 element.

Answer 4

 $('.hidelink').click(function(){ $(this).children('li').hide(); }); 

It will do

Answer 5

You can also use the .toggle() as method,

 $(this).closest('ul').children('li:gt(2)').toggle(); 

Can you try this?

thanks.