Command "see more"

Question

I have a mobile page, it has enough texts with various information on such a subject, with a few paragraphs, I wonder if there is a way to leave a paragraph of each subject in view with three dots and the option "...see more" to display the other paragraphs if it is in the user’s interest.

Answer 1

For who uses jQuery there is a plugin ready to facilitate the work:

• https://github.com/viralpatel/jquery.shorten

For those who use React there are also solutions, one I found was:

• https://github.com/One-com/react-show-more

If you want to create something manually, I made an example very simple using position: relative; combined with absolute and Javascript (classList.toggle), something like that:

var morelinks = document.querySelectorAll(".section > .txt-more");

for (var i = 0, j = morelinks.length; i < j; i++) {
     morelinks[0].onclick = function () {
          var container = this.parentNode.querySelector(".container");
          
          container.classList.toggle("partial");
          this.classList.toggle("txt-more");
     };
}

.section {
    position: relative;
    background: #fff;
}

.section > .txt-more {
    display: block;
    background: #fff;

    /*posiciona o link no final da DIV*/
    position: absolute;
    right: 0;
    bottom: 0;
}

.section > .partial {
    height: 200px; /* limita a altura aqui, assim irá limitar o texto*/
    overflow: hidden;
}

.section > a::before {
    content: "Ocultar"; /*Texto de quando o texto estiver visivel*/
}

.section > a.txt-more::before {
    content: "... Mostrar mais"; /* texto para o link*/
}

<div class="section">
    <div class="container partial">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sed convallis elementum, lacus lectus hendrerit quam, sed vulputate justo nisi eu purus. Proin et finibus nisi, sed fringilla est. Sed turpis ex, ullamcorper vel molestie id, faucibus ut lacus. Aenean neque nisl, ullamcorper ac commodo eget, sagittis vitae nulla. Vestibulum eget nisl non massa blandit pretium. Vivamus euismod mattis aliquet. Sed nec lorem in nulla tincidunt faucibus. Sed sem mi, vestibulum id nisl et, pellentesque vulputate nulla. Aenean ut diam efficitur, pulvinar purus id, auctor nibh. Nam sodales scelerisque maximus. Morbi aliquam arcu sit amet accumsan commodo.

In id consequat metus. Pellentesque accumsan leo scelerisque libero elementum sagittis. Maecenas eget libero hendrerit, semper purus pulvinar, consequat turpis. Ut quam erat, laoreet vitae volutpat nec, lacinia nec elit. Etiam eu condimentum metus. Mauris id venenatis quam. Morbi id ex enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque consequat blandit odio, porttitor sagittis turpis euismod eu. Maecenas luctus elit a consequat convallis. Morbi ultricies, ligula a iaculis suscipit, est justo pharetra purus, nec interdum elit libero eu metus. Maecenas aliquet enim id ipsum fermentum, quis vulputate sapien lobortis. Morbi id mauris tincidunt urna porttitor posuere. Curabitur a purus sit amet lorem dictum blandit sed sit amet nunc. Nulla et lorem non eros porta consequat vitae quis lacus. Aenean faucibus efficitur sem vitae faucibus.

Morbi quis mi posuere, vehicula quam nec, scelerisque est. Mauris vitae nisl et arcu consequat tristique. Nulla vitae scelerisque ex. Fusce ultrices lacus vel vehicula mollis. Cras facilisis sapien dictum neque placerat, vitae pretium lectus tincidunt. Donec eget euismod velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae magna tempus, tincidunt dui eu, imperdiet augue. In dictum lacus at lorem egestas, vel commodo purus ullamcorper. Ut vitae nisi hendrerit, lacinia leo a, vulputate quam. Etiam ac ante urna. Nullam ut sem vel turpis placerat accumsan. Donec nec consequat sem.
    </div>
    <a class="txt-more" href="javascript:void(0);"></a>
</div>