CODEWITHSUNDEEP
phpjquerywordpressloops
matheo972
matheo972

Reputation: 131

jquery and wordpress button

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);

Upvotes: 0

Views: 59

Answers (1)

Noman
Noman

Reputation: 4116

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>

Upvotes: 1

Related Questions