jquery and wordpress button

Question

i'm using wordpress and learning jquery and i have some problems. I get post from category with a foreach loop, and i added a button with a jquery function to show more information (toggle function) but the function always display the description of the first post even if i click on the other buttons. exemple : i click on the button of the third post but it's the description of the first post showing itself.

<?php
                            global $post;
                            $args = array( 'posts_per_page' => -1, 'offset'=> 1, 'category' => 264 );

                            $myposts = get_posts( $args );
                            foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
                                    <div class="post-container">
                                            <div class="post-thumbnail"><?php the_post_thumbnail() ?></div>
                                            <h3><?php the_title(); ?></h3>
                                            <button id="know-more" class="all-button" onClick="Myfunction();">En savoir plus</button>
                                            <div class="all-car" id="the-content"><?php the_content(); ?></div>
                                    </div>
                            <?php endforeach; 
                            wp_reset_postdata();?>

and my jQuery function

(function(){
    Myfunction = function(){
            ("#the_content").toggle(500);
    };
})(jQuery);

It looks like the id `the-content` is being generated inside a for each bock, meaning it is going to repeat. Id attributes are unique identifiers. As such, they are expected to be unique within a document. At the very least you need to review your logic and replace any duplicate ids with a class instead, which can repeat. — Taplar, Aug 03 '17 at 22:05
I also just noticed your javascript IIFE is does not have a parameter of `$` to accept the jQuery passed in, and your selector is missing the `$` in front of it. — Taplar, Aug 03 '17 at 22:08
I tried with a class (.all-car) but the problem all the generate div had the same class so finally it's display the description but for all the post this time @Taplar — matheo972, Aug 03 '17 at 22:17
that's a different error. that's a context issue which we can address in your question. but multiple ids is not a valid solution — Taplar, Aug 03 '17 at 22:20

score 1 · Accepted Answer · answered Aug 03 '17 at 22:22

ID attributes are unique identifiers read the difference here

If your html structure always same as per the above then use.

Make $ reference of jQuery, No need to make function, just use the class selector bind the click event and show the next div after the button.

$(document).ready(function() {
  $('.all-button').on('click', function() {
    $(this).next('.all-car').toggle(500);
  });
});

.all-car {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>


<button class="all-button">En savoir plus</button>
<div class="all-car">Lorem ipsum 1</div>

<button class="all-button">En savoir plus</button>
<div class="all-car">Lorem ipsum 2</div>

jquery and wordpress button

1 Answers1