Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JQuery Call Function To Parent And Children Div

JQuery Call Function To Parent And Children Div

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>

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

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

Sep 17, 2014Hoan Huynh
SQL Server: Cannot resolve the collation conflict between in the equal to operationGoogle Email Domain Does Not Designate Permitted Sender Hosts
You Might Also Like:
  • Jquery checkbox checked
  • Get Image Width Height With JQuery And JavaScript
  • JQuery How to use DatePicker
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • Facebook Like Button And Recommend Button With fb:like, iframe and html5
  • JQuery Create Textbox With Count Down Limit Characters
  • ASP.NET JQuery Autocomplete Textbox
  • JQuery Allow only numeric characters or only alphabet characters in textbox
  • Download JQuery Min From Google CDN Microsoft CDN And JQuery CDN
  • JQuery Get selected value of radio button
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]rapiddev.com

6 years ago JavascriptHTML, JQuery150
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
22,194 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
20,068 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
15,844 views
JQuery Allow only numeric characters or only alphabet characters in textbox
13,316 views
C# Read Json From URL And Parse/Deserialize Json
9,815 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • What Can I Expect From An Academic Essay Service?

  • Can Be Essay Service Companies Good For You?

  • Tips To Choosing The Ideal Essay Writers
  • How to Choose the Most Effective Free Photo Editor on the Web
  • How to Compose Your Essay To Me – 4 Easy Steps to Write My Essay
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (28)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (110)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development