Question

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

Answer 1

Still waiting for a reply on your comment but I refactored a little…

$(function() {
    $(".less").hide();
    $(".more").each(function() {
        if ($(this).parents('.appsList').height() < 150)
            $(this).hide();  
    });

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

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

});