javascript - jQuery limit div characters to 90 when a certain class is there -

i trying limit element's characters 90 words normally. when show more button clicked should remove limit.

i tried using class , attaching limit class , removing class when show more button clicked.

my attempt @ this:

        <header>            <h1>heading goes here</h1>            <p class="jumbo-p non-exp">                quick brown fox jumped on lazy dog. quick brown fox jumped on lazy dog. quick brown fox jumped on lazy dog. quick brown fox jumped on lazy dog.            </p>            <a href="#" class="more1">more</a>        </header>  

the css:

     .jumbo-p{display: inline-block; height: 20px; overflow: hidden;}      .more1 {position: relative; left: 2px; top: -21px;}      .jumbo-p.expanded+.more1 {display: none}      .jumbo-p.expanded {height: auto;} 

the jquery make work:

        $(".non-exp").text(function(index, currenttext) {             return currenttext.substr(0, 90) + '...';         });         $(document).on('click', '.more1', function(event) {             event.preventdefault();             $('.jumbo-p').toggleclass('expanded');             $('.jumbo-p').removeclass('non-exp');         }); 

this puts limit on div limit not removed when class removed. please help.

store original text in variable , reinsert on click.

var text = $(".non-exp").text();     $(".non-exp").text(function(index, currenttext) {         return currenttext.substr(0, 90) + '...';     }); $(document).on('click', '.more1', function(event) {     event.preventdefault();     $(".non-exp").text(text);     $('.jumbo-p').toggleclass('expanded');     $('.jumbo-p').removeclass('non-exp'); });