Execute a function on two different elements without affecting each other

Question

Execute a function on two different elements without affecting each other

Navigation

#1 by (0 votes)

0

Clicking the "View More" button needs to make the div containing the post text expand, if it affects the div on the side. I tried to use toggleClass() however the two open at the same time, or using an id only the first one opens.

js

jQuery(document).ready(function($){$('#btn-open-post').click(function(event){$('#post-collapse').toggleClass('post-collapse');});});

html

<divclass="blog">
        <h2 class="blog-latest">últimas do blog</h2>
           <div class="row">
              <?php echo do_shortcode( '[dois_ultimos]' ); ?>
           </div>
           <a href="/blog/" class="all-posts">ver todas</a>
        </div>
     </div>

php

function dois_ultimos_posts()
{
    global $post;

    $html = "";

    $dois_ultimos = new WP_Query( array(
         'post_type' => 'post',
         'posts_per_page' => 2
    ));

    if( $dois_ultimos->have_posts() ) : while( $dois_ultimos->have_posts() ) : $dois_ultimos->the_post();
             $html .= "<div class='col-md-6 post-home'  >";
         $html .= "<a href=\"" . get_permalink() . "\" class=\"post-permalink\"> <h3 class='post-title'>" . get_the_title() . " </h3>" . "</a>";
         $html .= "<p class='post-resume' id='post-collapse'>" . get_the_content() . "</p>";
         $html .= "<button id='btn-open-post' class='btn-open-post' id=\"" .get_the_ID() . "\" >Ver mais</button> ";
         $html .= "<div class='overlay-blog-post'>&nbsp;</div> ";
         $html .= "</div>";
    endwhile; endif;

    return $html;
}

javascript wordpress jquery-toggleclass

asked by anonymous 23.05.2016 / 19:50

1 answer

Fixed size + responsive bootstrap 3 Select multiple files

score 0 · Accepted Answer

You can use $(this) within the click event call to get exactly the button that was clicked. From there you can fetch the "brother" element of the button, which would be the #post-collapse element, and then apply the toggleClass. Remember that if you put two identical ids on the same page, it will only be applied to one of the elements, since the value of the id attribute must be unique, try with a class.

It would be something like this:

jQuery(document).ready(function($) {
  $('#btn-open-post').click(function(event) {
    $(this).prev('#post-collapse').toggleClass('post-collapse');
  });
});