javascript - Jquery selecting elements next/prev/closest -
hi have html , want add actions when user click on h4.
<div class="row success"> <div class="col-sm-4 no-pad-r img-toggle"> <?php the_post_thumbnail(); ?> </div> <div class="col-sm-6 col-sm-offset-1 no-pad-l"> <h4 class="heading-toggle"><?php the_title(); ?></h4> <div class="line"></div> <p class="intro">"<?php the_field('first_line'); ?>."</p> <div class="toggle-content" style="display: none"> <div class="main-copy"> <?php the_content(); ?></div> <h5><?php the_field('author_name'); ?></h5> <p class="position"><?php the_field('author_position'); ?></p> </div> <button class="btn toggle btn-danger"></button> </div>
so want add classes , slidetoggle on click cant select proper elements.
this attempt.
$( ".heading-toggle" ).click(function() { $(this).next( ".toggle-content" ).slidetoggle(); $(this).closest( ".success" ).toggleclass( "highlight" ); $(this).closest( ".toggle" ).toggleclass( "open" ); });
the thing works here adding highlight class .success div, rest 2 functions doesn`t work. doing wrong here?
if want select element on same level use .siblings method http://api.jquery.com/siblings/
so code this
$( ".heading-toggle" ).click(function() { $(this).siblings( ".toggle-content" ).slidetoggle(); $(this).closest( ".success" ).toggleclass( "highlight" ); $(this).siblings('.btn').toggleclass( "open" ); });
Comments
Post a Comment