Character limit or content height limit for show more see less

Question

I need the button for "see more" to disappear if there isn't any more text to see. The best way I think would be to do a Character count and work out roughly when the text gets close to the 365px container height.

Does anyone have suggestions and hows best to edit the script to introduce a Character rule?

    $("[id^=infopanelcollapse]").click(function() {
        $(this).toggleClass("btn-more");
        $(this).prev().toggleClass("expand");
    });

        $("[id^=infopanelcollapse]").click(function() {
            $(this).toggleClass("btn-more");
            $(this).prev().toggleClass("expand");
        });

.product-overflow {
  max-height: 365px;
  min-height: 365px;
  overflow: hidden;
  position: relative;
}
.product-overflow.expand {
  max-height: none;
  height: auto;
  overflow: hidden;
}
.expand-button .less, .expand-button.btn-more .more {
  display: none;
}
.expand-button .more, .expand-button.btn-more .less {
  display: block;
}
.expand-button {
text-align:center;
text-decoration:underline;
cursor:pointer;
}
.product-overflow:before {
  content: "\00a0";
  height: 120px;
  width: 100%;
  position: absolute;
  display: block;
  bottom: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.product-overflow.expand:before {
  height: 0;
}

<div class="row product-overflow">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor lacinia, bibendum nunc non, auctor ipsum. Quisque non placerat mauris, efficitur interdum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac risus eu ante rhoncus fringilla in vel dui. Pellentesque felis libero, mollis sit amet faucibus eget, placerat eu nibh. Curabitur auctor eget nisl eu faucibus. Aenean id elementum mi, ac maximus eros. Aenean bibendum felis vitae metus dictum cursus. Praesent ac nisl eros. Proin mi justo, molestie a leo vel, facilisis vehicula quam. In euismod pulvinar dignissim. Ut iaculis nulla vel lacinia dapibus. Maecenas quis ex ut purus facilisis mattis et in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor lacinia, bibendum nunc non, auctor ipsum. Quisque non placerat mauris, efficitur interdum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac risus eu ante rhoncus fringilla in vel dui. Pellentesque felis libero, mollis sit amet faucibus eget, placerat eu nibh. Curabitur auctor eget nisl eu faucibus. Aenean id elementum mi, ac maximus eros. Aenean bibendum felis vitae metus dictum cursus. Praesent ac nisl eros. Proin mi justo, molestie a leo vel, facilisis vehicula quam. In euismod pulvinar dignissim. Ut iaculis nulla vel lacinia dapibus. Maecenas quis ex ut purus facilisis mattis et in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
</div>

<div id="infopanelcollapse" class="expand-button text-center"><span class="more">See more <span class="halflings chevron-down"></span></span><span class="less">See less <span class="halflings chevron-up"></span></span></div>

Cheers guys JSFiddle

just use .length() and that will be the character count right ? Also isnt there a better way to do this ? with regards to the overflow css ? maybe having a look at that will help ... : http://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow — thatOneGuy, May 21 '15 at 13:47
Thanks - quite like the solution and this one - http://jsfiddle.net/Skooljester/jWRRA/1/ although I cant get it to work with my fiddle. If you can amend my fiddle the accreditation is yours! — Tom Rudge, May 21 '15 at 14:43
I think. You want content height should not go beyond height if it goes then you want show more button. find demo (http://jsfiddle.net/jWRRA/74/) — Ganesh Yadav, May 22 '15 at 06:27
@locateganesh That's right but not the length of window, just the set length of the container — Tom Rudge, May 26 '15 at 08:27

thatOneGuy · Accepted Answer · 2015-05-26T09:26:06.180

1

Add a hidden class and add or remove when needed :

https://jsfiddle.net/otjjffmc/2/

    var containerHeight = $('#mainContainer').height();    
        var contentHeight = $('#content').height();

        if(contentHeight > containerHeight) {

        $('#infopanelcollapse').removeClass('hidden'); //remove class if content is bigger than container : i.e show the button

        $("[id^=infopanelcollapse]").click(function() {
                    $(this).toggleClass("btn-more");
                    $(this).prev().toggleClass("expand");
                });
        }
        else{
            $('#infopanelcollapse').addClass('hidden'); //add hidden class if content is smaller than div, i.e hide button
        }

edited May 26 '15 at 09:26

answered May 22 '15 at 08:42

thatOneGuy

9,977
7
48
90

Not quite, I want the button to not show if the content does not exceed the container length – Tom Rudge May 26 '15 at 08:28
updated answer, i thought i answered this differently :/ must have been another question or i was dreaming about all this, hopefully not the latter :L – thatOneGuy May 26 '15 at 09:15

Character limit or content height limit for show more see less

1 Answers1