Trouble passing 'this' to correct variable

Trouble passing 'this' to correct variable

  2. <script>

  4.             $( ".info_button" ).on( "click", function() {

  6.                 var position = $( ".result_content" ).css( "margin-top" );

  8.                 if ( position == "-170px" ) {

  10.                     $( ".result_content" ).animate({

  12.                         marginTop: "0",

  14.                     }, 500 );

  16.                 } else {

  18.                     $ ( ".result_content" ).animate({

  20.                         marginTop: "-170px",

  22.                     }, 500 );

  24.                 }

  26.             });

  28. </script>
See the above code that I will be referencing throughout my question.

This bit of code essentially detects the location of a <div>, and then responds accordingly by either sliding it upwards, or sliding it back downwards into its original position.

My problem is that I have multiple of the .result_content <div>, and when I click the .info_button, it displaces every .result_content <div>, rather than just the one that the button is on. I once tried replacing .result_content with 'this', but it then shifted the .info_button <div> upwards rather than the .result_content <div>.

For your convenience, I have provided a selection of the html below:

  2. <div class="result_content">
  3.                 
  4.                     <p class="title">Title</p>
  5.                 
  6.                     <p class="description">Description</p>
  7.                 
  8.                     <p class="visit_site">Visit Site</p>

  10.                     <p class="info_button">More<p>

  12. </div>