Problem

I tried to hide elements through jquery. However cannot found any reason why it is not working. I did how was showed in a example: https://jsfiddle.net/cse_tushar/6FzSb/
My site is where can be seen full problem: http://bookanytravel.com/hotels-en/
Don’t judgr very strongly maybe I forgot to put some jquery plugin

Code Html:

<ul id="myList">
     <li class="mix col-sm-6 col-xs-12 stars-<?=$stars?> <?=$emirate?> <?=strtolower(the_title('','',false))?>" data-priceorder="<?=$price_ord?>" data-ratingorder="96" data-starorder="<?=$stars?>">



        <div class="hotel_card">

        <div class="tour_img" style="background-image: url(<?=$photo[0]?>);"></div>

      <div class="price"><?=pll__('from')?> <strong><?=types_render_field("price", array("raw"=>"true"))?></strong></div>



    <div class="tour_info">

    <h3 class="title"><a href="<?=get_permalink( $post->ID )?>"><? the_title(); ?></a></h3>

   <div class="category"><?=types_render_field("address", array("raw"=>"true"))?></div>

 <div class="stars">

    <? $stars = types_render_field("stars", array("raw"=>"true"));

        for ($i = 1; $i <= $stars; $i++): ?>

            <span></span>

        <? endfor; ?>

</div>

 </div>



                                        <div class="tour_links">

                                            <hr>

                                            <a data-remodal-target="modal_<?=$post->ID?>" href="#" class="book_tour"><?=pll__('Book the Hotel')?></a>

                                            <a href="<?=get_permalink( $post->ID )?>" class="read_more"><?=pll__('Read More')?></a>

                                            <hr>

                                        </div>

                                    </div>



                                </li>
   </ul>
  <div id="loadMore" class="block margin-bottom-30 load_border_button" align="center"><?=pll__('Load more hotels')?>

Jquery

$(document).ready(function () {

                size_li = $("#myList li").size();

                x=3;

                $('#myList li:lt('+x+')').show();

                $('#loadMore').click(function () {

                    x= (x+5 <= size_li) ? x+5 : size_li;

                    $('#myList li:lt('+x+')').show();

                });

            });

Read more here: Load more not working jquery


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: