Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 554
  • Last Modified:

Jquery Select

Hi guys,

I have two text areas on a page coming from a plugin / include file so cannot change anything they need to have the same class etc..

My code is below. What I want to do is only animate the closest textarea not the two of them.. Can some one help me with the selector

thanks

John



<li id="field_2_4" class="gfield      gfield_html gfield_html_formatted gfield_no_follows_desc"><label class="becauseLabel">Because I am a Girl...</label></li><li id="field_2_1" class="gfield"><label class="gfield_label" for="input_2_1">Post Title</label><div class="ginput_container"><input name="input_1" id="input_2_1" value="" class="medium" tabindex="1" type="text"></div></li><li id="field_2_2" class="gfield"><label class="gfield_label" for="input_2_2"></label><div class="ginput_container"><textarea name="input_2" id="input_2_2" class="textarea medium" tabindex="2" rows="10" cols="50"></textarea></div></li>

Open in new window


$('.becauseLabel').click(function(e) {
		  $('textarea#input_2_2').stop().animate({'height':200},1000); 
		});

Open in new window

0
john_yourspace
Asked:
john_yourspace
  • 5
  • 5
1 Solution
 
Julian HansenCommented:
As far as I can see there is only one text area in the code you posted but here is a sample that should demonstrate how to do what you want
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	alert($('#container').find('textarea').val());
});
</script>
</head>
<body>
<div id="container">
	<textarea class="someclass">Test</textarea>
	<textarea class="comeclass">Other test</textarea>
</div>
</body>
</html>

Open in new window

0
 
john_yourspaceAuthor Commented:
Hi Julian,

This is kinda of what i am trying to do, perhaps I should explain abit more.

I have a label which when clicked opens a textarea (ie makes it bigger)

The problem is there is two labels and two textareas all with the same names.

Labels have a class called becauseLabel


So when I click the label both boxes expand as they have the same class.

I need to set it so that only the cloeset textarea to the label which has been click is acted upon
0
 
Julian HansenCommented:
Ok so then just change the jquery line to this
$function() {
  $('lable.classname').click(function() {  
     $(this).find('textarea').dosomething();
  });
});

Open in new window

Basically take the object that is clicked and then tell that object to find the next textarea relative to it.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
john_yourspaceAuthor Commented:
I have this now and it dont work?

$('.becauseLabel').click(function(e) {

   $(this).find('textarea').stop().animate({'height':200},1000); 
});

Open in new window

0
 
Julian HansenCommented:
Change to this

$('.becauseLabel').click(function(e) {
  $('#' + $(this).parent().attr('id') + ' ~ li').find('textarea').stop().animate({'height':200},1000); 
});

Open in new window

0
 
john_yourspaceAuthor Commented:
works but is still animating both boxes :(

here is my complete js

$('textarea#input_2_2').focus(function() {
		  $(this).stop().animate({'height':200},1000); 
		});
		

		
		$('.becauseLabel').click(function(e) {
		  $('#' + $(this).parent().attr('id') + ' ~ li').find('textarea').stop().animate({'height':200},1000); 
		});
		
		$('.gform_submit_button_2').click(function() {
		   $(this).find('textarea').stop().animate({'height':0},1000); 
		});

Open in new window

0
 
Julian HansenCommented:
You can also try this
$(this).parent().next('.gfield').next('.gfield').find('textarea').stop().animate({'height':200},1000);

Open in new window

You did not post full code for the list so I had to guess but this seems to work
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.becauseLabel').click(function(e) {
    $(this).parent().next('.gfield').next('.gfield').find('textarea').stop().animate({'height':200},1000);
  });
});
</script>
</head>

<body>
<ul>
<li id="field_1_4" class="gfield      gfield_html gfield_html_formatted gfield_no_follows_desc">
  <label class="becauseLabel">Because I am a Girl...</label>
</li>
<li id="field_1_1" class="gfield">
  <label class="gfield_label" for="input_2_1">Post Title</label>
  <div class="ginput_container">
    <input name="input_1" id="input_2_1" value="" class="medium" tabindex="1" type="text">
  </div>
</li>
<li id="field_2_2" class="gfield">
    <label class="gfield_label" for="input_2_2"></label>
    <div class="ginput_container">
    <textarea name="input_2" id="input_2_2" class="textarea medium" tabindex="2" rows="10" cols="50">a</textarea>
  </div>
</li>
<li id="field_2_4" class="gfield      gfield_html gfield_html_formatted gfield_no_follows_desc">
<label class="becauseLabel">Because I am a Girl...</label></li>
<li id="field_2_1" class="gfield">
  <label class="gfield_label" for="input_2_1">Post Title</label>
  <div class="ginput_container">
    <input name="input_1" id="input_2_1" value="" class="medium" tabindex="1" type="text"></div></li><li id="field_2_2" class="gfield">
    <label class="gfield_label" for="input_2_2"></label><div class="ginput_container">
    <textarea name="input_2" id="input_2_2" class="textarea medium" tabindex="2" rows="10" cols="50">a</textarea>
  </div>
</li>
</ul>
</body>
</html>

Open in new window

0
 
john_yourspaceAuthor Commented:
That worked perfect thanks Julian

John
0
 
john_yourspaceAuthor Commented:
A++
0
 
Julian HansenCommented:
You are welcome
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now