jquery for each function
- by jonathan p
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
