slideToggle Help

[abrahamgarcia27]

I am having trouble getting the slideToggle function to work. i need to click on a href with a class and i want it to open a div underneath. i tried using the next() function, but that didnt work. So what the function does now is when i click the link it will slidetoggle all the contact div. I want it to open just the next div with the class of contact. 

 

 

PHP Function 

<div class="posting">
	<div class="one columns">
		'.$image.'
	</div>
	<div class="fifteen columns">
		<a href="#" class="contactlink"><div class="posttitle">'.stripslashes($mainRow['book_title']).'</div></a>
		<div class="postdesc">'.stripslashes($mainRow['book_desc']).'</div>
		<br>
		<div class="three columns"><div class="postprice">$ '.stripslashes($mainRow['book_price']).'</div></div>
		<div class="three columns"><div class="postclass">'.stripslashes($mainRow['book_class']).'</div></div>
		<div class="three columns"><div class="postcondition">'.stripslashes($mainRow['book_condition']).'</div></div>
	</div>
</div>
<div class="clear"></div>
<hr>
<div class="contact" style="display:none;">
	<form action="">
		<input type="text">
		<input type="text">
		<input type="text">
	</form>
</div>

jQuery Function

$(document).ready(function() {
  $('.contactlink').click(function() {
     $(".contact").slideToggle('fast'); // Toggle dd when the respective dt is clicked
  });
});

[nogray]

Since your elements do not share a parent and they are not directly related, you would need to add either an id or a reference to link both of the elements (e.g. give the link an id "contactlink_id_1" and the div "contact_id_1").

 

Otherwise, you would have to loop through the entire document and check if the contact element is after the element that fired the event (which is not optimal)..

[abrahamgarcia27]

how would i tell the jquery function to listen to the id and get the contact id link? I know i would give the id via database primary id, but what is the proper way to just write one jquery function?

[nogray]

Let's say you have this html code <a href="#" class="contactlink" id="my_link_id_1">, you can use jquery to extract the id as the following

$('.contactlink').click(function(){
   var id = this.id;
   id = id.split('_');
   id = id[id.length - 1];
   alert(id); // You can use $("#contact_id_"+id).slideToggle('fast'); here
});









Edited June 8, 2013 by nogray