wordpress用ajax显示内容块

Question

I have block with images, which are thumbnails for different posts WP. Block "the content();" hide in CSS. I need to show content after clicking on corespond img.

In a last attempt I have tried to show the hidden div with content block, I have received not matching div with contetn and this error:

Uncaught TypeError: $ is not a function(…)

$(".show-more").click(function(){
                                $(document).find(".more_service:not(:visible)").slideToggle('fast',
                                    function() {
                                        if ($(document).find(".more_service:not(:visible)").length==0) {
                                            $(".show-more").css("display","none");
                                        }
                                    }
                                );
                            })

#more_service {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<?php
  while ($gadget->have_posts()) : $gadget->the_post(); ?>
<div class="img-hover">
  <img class="img-responsive img-rounded show-more" id="client" 
        src="<?php echo get_the_post_thumbnail_url(); ?>"
        alt="<?php the_title(); ?>">
</div>

 <div id="more_service">
    <?php the_content(); ?>
</div>

<?php endwhile;
wp_reset_query(); ?>

Please, tell me, how can I correctly do this task?

</div>

Answer 1

You are using jQuery, before it was loaded

Raed about it here: https://stackoverflow.com/a/12343739/7172121