Search jQuery

jQuery Forum

Using jQuery

grant.h.n..

Trouble passing 'this' to correct variable

in Using jQuery • 8 years ago

<script>
$( ".info_button" ).on( "click", function() {
var position = $( ".result_content" ).css( "margin-top" );
if ( position == "-170px" ) {
$( ".result_content" ).animate({
marginTop: "0",
}, 500 );
} else {
$ ( ".result_content" ).animate({
marginTop: "-170px",
}, 500 );
}
});
</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: