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:
Expand|Select|Wrap|Line Numbers
- $(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);
- });
- });
Expand|Select|Wrap|Line Numbers
- <div class="more-less">
- <div class="more-block">
- <p>Random story here</p>
- </div>
- </div>