silvercover Posted September 6, 2013 Share Posted September 6, 2013 I have a long unordered list that must be cut down and each time 10 items must be visible in visible area and by clicking one arrow button the next 10 items show up. something like below image:each column HTML code is like this: <li class="linkcat"><h2>Main Title</h2> <ul class="xoxo blogroll"> <li><a href="#">Title 1</a></li> <li><a href="#">Title 2</a></li> <li><a href="#">Title 3</a></li> ... <li><a href="#">Title 4</a></li> </ul> </li> What should I do? Link to comment https://forums.phpfreaks.com/topic/281914-toggle-unordered-list/ Share on other sites More sharing options...
mentalist Posted September 11, 2013 Share Posted September 11, 2013 Affect the CSS attribute of "ol" and change "start" to whatever number you want. For ordering, its either forward or backwards using the "reverse" attribute. Otherwise you'll need to build a list of all the list elements and manage it from there... but if you're doing that then it may be better to store the elements in an array or similar and manage from there... Link to comment https://forums.phpfreaks.com/topic/281914-toggle-unordered-list/#findComment-1449109 Share on other sites More sharing options...
priyankagound Posted September 18, 2013 Share Posted September 18, 2013 Try out with the below code. $(this).find("ul").toggle(); Link to comment https://forums.phpfreaks.com/topic/281914-toggle-unordered-list/#findComment-1450033 Share on other sites More sharing options...
JustLikeIcarus Posted September 21, 2013 Share Posted September 21, 2013 Here us a js fiddle with an up all night off the top of my head method http://jsfiddle.net/MtBSe/1/ Hope it helps Html: <body> <ul class="blogroll"> <li><a href="#">Title 1</a></li> <li><a href="#">Title 2</a></li> <li><a href="#">Title 3</a></li> <li><a href="#">Title 4</a></li> <li><a href="#">Title 5</a></li> <li><a href="#">Title 6</a></li> <li><a href="#">Title 7</a></li> <li><a href="#">Title 8</a></li> <li><a href="#">Title 9</a></li> <li><a href="#">Title 10</a></li> <li><a href="#">Title 11</a></li> <li><a href="#">Title 12</a></li> <li><a href="#">Title 13</a></li> <li><a href="#">Title 14</a></li> <li><a href="#">Title 15</a></li> <li><a href="#">Title 16</a></li> </ul> <a href="#" class="pager" data-page="1"> Next </a> </body> jQuery: $(function (){ var pageSize = 4; var count = 0; currentPage = $('.pager').data('page'); $(".blogroll li").each(function(i){ count = i % 4 == 0 ? count + 1 : count; $(this).addClass("listGroup" + count); }).not(".listGroup" + currentPage).hide(); $('.pager').on("click", function(e){ currentPage = currentPage < count ? currentPage + 1 : 1; $(this).data("page", currentPage); $(".blogroll").find("li").hide().end().find(".listGroup" + currentPage).show(); }); }); Link to comment https://forums.phpfreaks.com/topic/281914-toggle-unordered-list/#findComment-1450547 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.