Hey guys, so im working on a site, and i have this "view more" Button on each comment.

So i found one online, but i need to make 1 change.
Right now the "view more" button shows up on every comment no matter what.
What i need is to have it show up only if the height of the div .more-less .more-block p has a height of say, 40px or more.

Here is what i have for my jquery right now, and html

jquery
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

// The height of the content block when it's not expanded
var adjustheight = 30;
// The "more" link text
var moreText = "+  More";
// The "less" link text
var lessText = "- Less";

// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block p").css('height', adjustheight).css('overflow', 'hidden');

// The section added to the bottom of the "more-less" div
$(".more-less").append('<a href="#" class="adjust"></a>');

$("a.adjust").text(moreText);

$(".adjust").toggle(function() {
		$(this).parents("div:first").find(".more-block p").css('height', 'auto').css('overflow', 'visible');
		// Hide the [...] when expanded
		$(this).parents("div:first").find("p.continued").css('display', 'none');
		$(this).text(lessText);
	}, function() {
		$(this).parents("div:first").find(".more-block p").css('height', adjustheight).css('overflow', 'hidden');
		$(this).parents("div:first").find("p.continued").css('display', 'none');
		$(this).text(moreText);
});
});

</script>
HTML

Code:
<div class="comment_message">
            	<div class="more-less">
    
    	<div class="more-block">
        				<p>This is where a comment would go. </p>
</div></div></div>
Any help is greatly appreciated.
Thanks