Dynamic IDs in JavaScript as part of wordpress loop


#1

I’m adding some FAQ functionality to a site using wordpress, I’m having difficulty getting it to work with dynamic post ids.

I can sucessfully pass the dynamic id to the javascript function but cannot seem to get the .show to work. The console shows an error Uncaught TypeError: $ is not a function.

I’ve tried various things including using concat etc but can’t seen to get the thing to function.

Code below (including the wordpress loop):

<?php

$paged = get_query_var( 'paged' ) ? get_query_var( 'page' ) : 1;

$featuredPosts = new WP_Query( array( 'posts_per_page' => 100, 'post_type' => 'faq', 'orderby' => 'desc' ) );

while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); 

$postid = get_the_ID(); ?>



<a id="faq_question_<?php echo $postid; ?>" href="#" title="<?php the_title_attribute(); ?>"><?php echo strip_tags(get_field('question')); ?></a>

<div id="faq_answer_<?php echo $postid; ?>" style="display:none;">
	<p><?php echo strip_tags(get_field('answer')); ?></p>
</div>

	<script type="text/javascript"> 
   $(function() {
       $("question_div_" + "<?php echo $postid ?>").click(function() {
           $("answer_div_" + "<?php echo $postid ?>").show();
           return false;
       });        
   });
</script>

</a>

<hr>

<?php endwhile; ?>

<?php wp_reset_query(); ?>

Where am I going wrong?