Task: there is a block with pictures that are images of different WP posts. Block the content(); hidden in CSS. It is necessary to implement the display of the contents of the corresponding content block when clicking on the corresponding image.

In the last attempt I tried to display the hidden div c content besides the error, I also ran into this error:

Uncaught TypeError: $ is not a function (...)

I beg you, tell me how can this be implemented?

 $(".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>

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

WordPress uses jQuery in noconflict mode. Using the $ character causes an error. It is necessary in the script to replace all or $ characters with jQuery

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

either run your own my.js script with the following content

 jQuery(document).ready(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"); } } ); }); // Прочие действия после загрузки страницы });

In this example, the $ argument in the first line is important; it allows you to further use this symbol inside the function.

The script my.js must be run from the functions.php of your theme.

 function my_enqueue_scripts() { wp_register_script('my', 'my.js', array('jquery', 'cycle')); wp_enqueue_script('my'); } add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts');