It is necessary to make a hidden text, but with a gradient. I take this script http://jsfiddle.net/yurik417/6FYqf/ I add a class to it:

.shadow{ z-index:-1; box-shadow:inset 0px -40px 90px 4px #ccc; }

I apply it to:

 <p class="pr2 shadow"> текст </p>

How to make the gradient over the "full text" button, and when the text unfolds there was no gradient?

Can there be a plugin for hidden text, with the gradient option?

    1 answer 1

    As I understand it, the gradient requires such a plan:

     .hide { position: relative; } .hide:after { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; content: ""; background: linear-gradient(to top, rgba(255,255,255, 1) 10%, rgba(255,255,255, 0) 80%); } 
     <div class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas itaque earum aspernatur nemo amet nostrum reprehenderit est eum, asperiores voluptate, reiciendis eaque laboriosam aliquam! Doloremque culpa magni, voluptatum voluptas?</div>

    Since, in the example, the link to the полный текст is on the same level with the text, I think it is necessary to wrap the visible part of the text in a separate block. For example:

     .... $el.html('<div class="hide">' + textVisible + '</div>').append($afterLength).append($elTextHidden); ...

    and apply styles to this block. For example, those that I indicated above.

    Accordingly, when clicking on the полный текст to remove the gradient, we use toggleClass () to change the class and .siblings () to search our div for the link полный текст

     .... $more.siblings('div').toggleClass('hide');

    So we’ll get something like this: jsfiddle

    • Yes, thanks, what you need. - evans
    • only in my case, the entire text is initially hidden, for some reason it is assigned the value display: none , solved the problem by specifying manually in the display: block class - evans