wigglesby Posted December 18, 2009 Share Posted December 18, 2009 Hi I have a script that lists a lot of links within an-ordered list. As the list will be different lengths for different pages (user profiles) I want to display the first 5 links, then have a button that when clicked, will then show the next 5 (including the first 5 - so a total of 10 links) Is this possible? Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/ Share on other sites More sharing options...
wigglesby Posted December 21, 2009 Author Share Posted December 21, 2009 Can anyone help me with this? Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981420 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 Yes you can do this what is your code you have so far ? Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981421 Share on other sites More sharing options...
wigglesby Posted December 21, 2009 Author Share Posted December 21, 2009 I found an example using the following: var numShown = 5; // Initial rows shown & index var numMore = 5; // Increment var numRows = $('table').find('tr').length; // Total # rows $(document).ready(function(){ // Hide rows and add clickable div $('table') .find('tr:gt(' + (numShown - 1) + ')').hide().end() .after('<div id="more">Show <span>' + numMore + '</span> More</div>'); $('#more').click(function(){ numShown = numShown + numMore; // no more show more if done if ( numShown >= numRows ) $('#more').remove(); // change rows remaining if less than increment if ( numRows - numShown < numMore ) $('#more span').html(numRows - numShown); $('table').find('tr:lt('+numShown+')').show(); }) }) But when clicking on the div 'Show More' the div disappears and no other results are displayed. They remain as style="display:none" in the HTML. Thanks Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981430 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 this will show a table rows it won't work on anything but tables what does your html code looks like ? Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981431 Share on other sites More sharing options...
wigglesby Posted December 21, 2009 Author Share Posted December 21, 2009 Sorry, I updated my code to include using <li> var numShown = 5; // Initial rows shown & index var numMore = 5; // Increment var numRows = jQuery('#test').find('li').length; // Total # rows jQuery(document).ready(function(){ // Hide rows and add clickable div jQuery('#test') .find('li:gt(' + (numShown - 1) + ')').hide().end() .after('<div id="more">Show <span>' + numMore + '</span> More</div>'); jQuery('#more').click(function(){ numShown = numShown + numMore; if ( numShown >= numRows ) jQuery('#more').remove(); if ( numRows - numShown < numMore ) $('#more span').html(numRows - numShown); jQuery('info').find('tr:lt('+numShown+')').show(); }) }) Well in firebug, it says the 6th -> nth <li> are style="display: none" but when i view the HTML source, there is no style attribute. My code when viewing the source is: <div id="test"> <h2>Articles Tagged by: arms</h2> <ul id="list"> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test1">test1</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test2">test2</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test3">test3</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test4">test4</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test5">test5</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test6">test6</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test7">test7</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test8">test8</a></li> <li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test9">test9</a></li> </ul> </div> Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981436 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 consider this code hope its helpful <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> var limit = 5; $(document).ready(function() { $('#morelink').click(function() { var counter = 0; $('#list > li').each(function() { if ($(this).is(':hidden')) { $(this).show(); counter++; } if (counter == limit) { return false; } }); }); }); </script> </HEAD> <BODY> <ol id="list"> <li>Node 1</li> <li>Node 2</li> <li>Node 3</li> <li>Node 4</li> <li>Node 5</li> <li style="display:none">Node 6</li> <li style="display:none">Node 7</li> <li style="display:none">Node 8</li> <li style="display:none">Node 9</li> <li style="display:none">Node 10</li> <li style="display:none">Node 11</li> <li style="display:none">Node 12</li> <li style="display:none">Node 13</li> <li style="display:none">Node 14</li> <li style="display:none">Node 15</li> </ol> <a id="morelink" href="javascript:;" />Next 5</a> </BODY> </HTML> Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981437 Share on other sites More sharing options...
wigglesby Posted December 21, 2009 Author Share Posted December 21, 2009 Hi thank for the example. Unfortunately that doesnt work. It just lists out all my <li> tags, rather than hiding the first 5. I am pulling the <li> from a db in PHP, so I'm using a foreach(). So I cannot manually give the 6th -nth <li> attribute of style="display: none". The example code I found worked well, just when clicking on the 'Show more' link, nothing happened.... Any more help would be much appreciated Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981442 Share on other sites More sharing options...
wigglesby Posted December 21, 2009 Author Share Posted December 21, 2009 Ok, I changed the code from a <ul><li> to using a table, like the code I gave. I can load the next 5 now, but the list has about 50 rows and after the first click, the 'Show more' link disappears. Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981447 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 your variable defination the var variable part has to be in the document ready Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981450 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 the following code does work but if you have 50 links it will show them and when the page loads it will hide the links after 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> var limit = 5; $(document).ready(function() { $('#morelink').click(function() { var counter = 0; $('#list > li').each(function() { if ($(this).is(':hidden')) { $(this).show(); counter++; } if (counter == limit) { return false; } }); }); $('#list > li').each(function(i) { if (i > 4) { $(this).hide(); } }); }); </script> </HEAD> <BODY> <ol id="list"> <li>Node 1</li> <li>Node 2</li> <li>Node 3</li> <li>Node 4</li> <li>Node 5</li> <li>Node 6</li> <li>Node 7</li> <li>Node 8</li> <li>Node 9</li> <li>Node 10</li> <li>Node 11</li> <li>Node 12</li> <li>Node 13</li> <li>Node 14</li> <li>Node 15</li> </ol> <a id="morelink" href="javascript:;" />Next 5</a> </BODY> </HTML> Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981453 Share on other sites More sharing options...
wigglesby Posted December 21, 2009 Author Share Posted December 21, 2009 That works great!! Is there anyway that if there are no more <li> to show, that the moreLink <a href> can be hidden? Also my other concern is that, it will say 'next 5'. What If there are 8 <li>'s? The link will say 'next 5' but only show 3 more.... Thanks Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981464 Share on other sites More sharing options...
wigglesby Posted December 21, 2009 Author Share Posted December 21, 2009 I managed to get it to work using the following: jQuery(document).ready(function(){ var numShown = 5; // Initial rows shown & index var numMore = 5; // Increment var numRows = jQuery('#list li').size(); // Total # rows alert(numRows); // Hide rows and add clickable div jQuery('#list') .find('li:gt(' + (numShown - 1) + ')').hide().end() .after('<div id="more">Show <span>' + numMore + '</span> More</div>'); jQuery('#more').click(function(){ numShown = numShown + numMore; // no more show more if done if ( numShown >= numRows ) jQuery('#more').remove(); // change rows remaining if less than increment if ( numRows - numShown < numMore ) jQuery('#more span').html(numRows - numShown); jQuery('#list').find('li:lt('+numShown+')').show(); }) }) Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981474 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 I managed to get it to work using the following: jQuery(document).ready(function(){ var numShown = 5; // Initial rows shown & index var numMore = 5; // Increment var numRows = jQuery('#list li').size(); // Total # rows alert(numRows); // Hide rows and add clickable div jQuery('#list') .find('li:gt(' + (numShown - 1) + ')').hide().end() .after('<div id="more">Show <span>' + numMore + '</span> More</div>'); jQuery('#more').click(function(){ numShown = numShown + numMore; // no more show more if done if ( numShown >= numRows ) jQuery('#more').remove(); // change rows remaining if less than increment if ( numRows - numShown < numMore ) jQuery('#more span').html(numRows - numShown); jQuery('#list').find('li:lt('+numShown+')').show(); }) }) Thats nice Link to comment https://forums.phpfreaks.com/topic/185581-showhide-multiple-s/#findComment-981481 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.