You can use children function to shoot anything on child element. please see below example:

 

HTML:-

<div class=”hover_team_section”>
<div class=”container”>
<div class=”base_cont col-md-6″><div class=”makbord”><div class=”image_cont”><img src=”<?php the_field(‘team_image_1’); ?>”/></div><div class=”titl_cont”><strong><?php the_field(‘team_title_1’); ?></strong></div></div><div class=”cont_short_cont”><?php the_field(‘team_short_description_1’); ?> </div><div class=”cont_hover_cont”><?php the_field(‘team_content_1’); ?> </div></div>

<div class=”base_cont col-md-6″><div class=”makbord”><div class=”image_cont”><img src=”<?php the_field(‘team_image_2’); ?>”/></div><div class=”titl_cont”><strong><?php the_field(‘team_title_2’); ?></strong></div></div><div class=”cont_short_cont”><?php the_field(‘team_short_description_1’); ?> </div><div class=”cont_hover_cont”><?php the_field(‘team_content_2’); ?> </div></div>

</div>
</div>

jQuery:-

$(document).ready(function(){
//slide down css for team
$( “.base_cont .image_cont” ).each(function(){
$(this).click(function() {
if($(this).parent().hasClass(“openset”)){
$(this).parent().removeClass(“openset”);
$(this).parent().children(“.cont_short_cont”).show(1000);
$(this).parent().children(“.cont_hover_cont”).hide(1000);
}else{
$( “.base_cont”).removeClass(“openset”);
$( “.base_cont .cont_short_cont” ).show(1000);
$( “.base_cont .cont_hover_cont” ).hide(1000);
$(this).parent().addClass(“openset”);
//alert($(this).parent().html());
$(this).parent().children(“.cont_short_cont”).hide(1000);
$(this).parent().children(“.cont_hover_cont”).show(1000);

}

});
});
});

Your Answer
Sign In
Enter email and password to comment or answer
Not the answer you are looking for? Browse other questions tagged or ask your own question.