I have added a show more or less function to a div - this all works fine however now i need to only allow this functionality if a element is over a certain height in this case. there are numerous classes of the same so i need to do the check on each element. although i am having problems getting it to work see code below :

$(document).ready(function() {
$(".less").hide();
$(".more").each(function() {
        var actualHeight = ($(this).parent().parent().find('.appsList').height());
        if (actualHeight < 150) {
        $(".more").hide();  
        }

                         });

$(".more").click(function() {
        var paragraphHeight = ($(this).parent().parent().find('.appsList').height());
        if (paragraphHeight > 150) {
        $(this).parent().parent().find('.appsHolderBody').animate({height:(paragraphHeight + 100) });
        $(this).hide('slow');
        $(this).parent().find('.less').show();
        }
        return false;    
                          });

$(".less").click(function() {
        $(this).parent().parent().find('.appsHolderBody').animate({height:190 });             
        $(this).hide('slow');
        $(this).parent().find('.more').show();
        return false;
                          });

});

Any help would be greatly appreciated - please note when i am targeting the parent using .parent.parent i know its not pretty but could'nt get it to run using eq(4) for some reason.

so the main problem is with this part of code

$(".more").each(function() {
        var actualHeight = ($(this).parent().parent().find('.appsList').height());
        if (actualHeight < 150) {
        $(".more").hide();  
        }

it hides all of the elements $(".more") instead of the ones that match the condition.

html as requested

<div class="appsHolder">

<div class="appsHolderBody">
<h5 class="appTitle">General Apps</h5>
<ul class="appsList">

<li class="mainAppList">Resource Manager</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

<li class="mainAppList">Resource Manager</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

<li class="mainAppList">Yet Another App</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

<li class="mainAppList">Yet Another App</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

<li class="mainAppList">Yet Another App</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

<li class="mainAppList">Yet Another App</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

<li class="mainAppList">Yet Another App</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

<li class="mainAppList">Yet Another App</li>
<li><a href="">Launch</a> <a href="">Info</a></li>

</ul>
</div>

<div class="appsHolderExpander">
<a href="" class="more">More <img src="/wps/PA_applicationsintros/./img/downArrow.png" /></a>
<a href="" class="less">Less <img src="/wps/PA_applicationsintros/./img/upArrow.png" /></a>
</div>

</div>

<div class="appsHolderAdvertising">

<div class="appsHolderBody">
<h5 class="appTitle">Advertising Apps</h5>
<ul class="appsList">

<li class="mainAppList">ATEX</li>
<li><a href="">Launch</a> <a href="">Info</a></li>



</ul>
</div>

<div class="appsHolderExpander">
<a href="" class="more">More <img src="/wps/PA_applicationsintros/./img/downArrow.png" /></a>
<a href="" class="less">Less <img src="/wps/PA_applicationsintros/./img/upArrow.png" /></a>
</div>



</div>

cheers in advance