Question

I have a page with multiple instances that contain of the following code:

<div class="company">
  <a class="toggle" id="<%= "tgl#{company.id}" -%>">...</a>
  <p>...other stuff...</p>
  <div class="clear"></div>
  <div class="expand_me companyExpand" id="">...

This code shows the beginning of each ‘panel’. When the user clicks on the .toggle, I need the .expand_me to toggle open using Jquery.

Here’s my code so far – it isn’t working and I think it’s due to a traversing problem.

$( ".toggle" ).click(function() {
  $(this).parent().children(".expand_me").toggle( "blind", {}, 500, callback );
});

How can I fix this?

Answer 1

The most safe way would be

$( ".toggle" ).click(function() {
  $(this).closest('.company').find('.expand_me').toggle( "blind", {}, 500, callback );
  return false; // to avoid following the actual link
});

Also note that you must have defined a method callback in order to use this. (or use the name of the function you want, instead)
I am saying this in case you just copy/pasted the code from the jquery examples.

example at http://jsfiddle.net/gaby/duAue/