Hi,
I couldn't fit this in a title, but here is what I need. I have a script that looks at height of a div and if it is more than 80 the script adds "More" button at the end so div initially displays with height of 80, but when someone clicks "More" button it shows all div. After they expand div there is a "Less" button to make it 80px high again. When div is not expanded there is [...] at the end of a text that indicates that there is more text.
Right now I need to somehow edit the script so if the height is less then 80 it will not add "More" and [...] and keep it as it is. Does anyone have any ideas on how to edit it to not do that when not needed?
Here is JavaScript:
And this are div's that .js script looks for.
I couldn't fit this in a title, but here is what I need. I have a script that looks at height of a div and if it is more than 80 the script adds "More" button at the end so div initially displays with height of 80, but when someone clicks "More" button it shows all div. After they expand div there is a "Less" button to make it 80px high again. When div is not expanded there is [...] at the end of a text that indicates that there is more text.
Right now I need to somehow edit the script so if the height is less then 80 it will not add "More" and [...] and keep it as it is. Does anyone have any ideas on how to edit it to not do that when not needed?
Here is JavaScript:
Code:
$(function(){ var adjustheight = 80; var moreText = "More"; var lessText = "Less"; $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden'); $(".more-less").append('<p class="continued">[…]</p><a href="#" class="adjust"></a>'); $("a.adjust").text(moreText); $(".adjust").toggle(function() { $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible').slideDown("slow"); $(this).parents("div:first").find("p.continued").css('display', 'none'); $(this).text(lessText); }, function() { $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); $(this).parents("div:first").find("p.continued").css('display', 'block'); $(this).text(moreText); }); });
Code:
<div class="more-less"> <div class="more-block"> <p>Random story here</p> </div> </div>