CODEWITHSUNDEEP
jqueryhtmlcss
Harshil Parekh
Harshil Parekh

Reputation: 136

Load More Functionality for <li> <ul> <li> tag using jQuery

I have <li class="level1> <ul class="level1"> <li class="level2"> in foreach loop. I have to put load more link in mega menu. enter image description here

from above image , I want to put load more link in all li tags if have more than 5 li,

I put below jQuery for that, but it not work. can any one help me?

<script type="text/javascript">
jQuery(document).ready(function () {


    size_li = jQuery(".level1 li").size();
    x=5;
    jQuery('.level1 li":lt('+x+')').show();
    jQuery('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        jQuery('.level1 li":lt('+x+')').show();
    });
});
</script>

also add css 

<style type="text/css">
.level1 li{
     display:none;
}
</style>

Getting Below output enter image description here

Upvotes: 2

Views: 1864

Answers (1)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

Based on .size() manual

.size() version is deprecated: 1.8, removed: 3.0. So use .length instead –

But you can change your code to this (better way):-

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length>5){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('ul.level1').on("click",'.loadMore',function (){
        jQuery(this).parent('.level1').children('li:gt(4)').show(); // use gt instead of lt
        jQuery(this).removeClass('loadMore').addClass('loadLess').text('LoadLess'); 
    });
    jQuery('ul.level1').on("click",'.loadLess',function () {
        jQuery(this).parent('.level1').children('li:gt(4)').hide(); // use gt instead of lt
        jQuery(this).removeClass('loadLess').addClass('loadMore').text('LoadMore'); 
    });
});

Working example code:-

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length>5){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('ul.level1').on("click",'.loadMore',function (){
        jQuery(this).parent('.level1').children('li:gt(4)').show(); // use gt instead of lt
        jQuery(this).removeClass('loadMore').addClass('loadLess').text('LoadLess'); 
    });
    jQuery('ul.level1').on("click",'.loadLess',function () {
        jQuery(this).parent('.level1').children('li:gt(4)').hide(); // use gt instead of lt
        jQuery(this).removeClass('loadLess').addClass('loadMore').text('LoadMore'); 
    });
});
.level1{
float:left;
width:25%;
}
.level1 li{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left:width:100%">
  <ul class="level1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
   <ul class="level1">
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
  <ul class="level1">
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
  </ul>
</div>

After seeing your website HTML, replace your code with below given code:-

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('.loadMore').click(function () {
        jQuery(this).parent('ul.level1').children('li:gt(5)').show(); // use gt instead of lt
    });
});

Upvotes: 2

Related Questions