For example, we want to show one div when click on another div inside a parent div. Or even can find an attribute of that div, we can use JQuery .parent() and JQuery .children() function to do that.
Call Function To Parent And Children Div With JQuery
HTML
We have a parent div class name ‘team-member’ and when click on children div ‘team-image’ and div ‘ops_team_member_name_position’ then another children div ‘ops_team_member_des’ will be shown.
<div class="team-member"> <div class="team-image" style="background-image: url(http://4rapiddev.com/wp-content/themes/4rapiddev/images/logo.png); height: 250px;"></div> <div class="descr"> <div class='ops_team_member_name_position'> <h5><strong>scelerisque ac nibh</strong></h5> <strong>Nam ac lorem auctor, egestas massa a, maximus sem.</strong> </div> <div style='display:none' class='ops_team_member_des'> Vivamus id leo euismod dolor tincidunt finibus. Ut dapibus, libero ut accumsan aliquam, ligula risus ornare dui, vehicula luctus lacus urna non sapien. </div> </div> </div> |
JQuery
jQuery(document).ready(function ($) { $( ".team-image" ).click(function() { $(this).parent().children(".descr").children(".ops_team_member_des").show( "slow" ); }); $( ".ops_team_member_name_position" ).click(function() { $(this).parent().children(".ops_team_member_des").show( "slow" ); }); }); |
