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? Quote Link to comment 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... Quote Link to comment 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(); Quote Link to comment 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(); }); }); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.