0

Tenho uma página mobile, ela tem bastante textos com várias informações sobre tal assunto, com alguns parágrafos, eu gostaria de saber se tem como eu deixar um parágrafo de cada assunto a vista com três pontinhos e a opção "...ver mais" para exibir os outros parágrafos se for do interesse do usuário.

7
  • Seria interessante citar a linguagem de programação utilizada e algum trecho que ja tenha tentado para que possamos te ajudar
    – Otto
    Commented 31/08/2017 às 19:47
  • html e css, e o código eu não consegui nada ainda!
    – Fabio
    Commented 31/08/2017 às 19:57
  • html não é linguagem de programação e sim marcação e css é para estilos, então seria interessante começar a usar uma linguagem ou se for manter em html teria de ser feito na mao mesmo inserindo um botao no final do paragrafo direcionando para outra pagina com o texto completo.
    – Otto
    Commented 31/08/2017 às 19:59
  • Estou querendo esconder na mesma página, sem direcionar para outra, você sabe o nome dessa função em php, para eu pesquisar sobre?
    – Fabio
    Commented 31/08/2017 às 20:03
  • Você pode por o conteudo completo dentro de outra div deixar ele como hide e quando clicar por javascript da um show
    – Otto
    Commented 31/08/2017 às 20:04

1 Resposta 1

2

Pra quem usa jQuery existe um plugin pronto para facilitar o trabalho:

Para quem usa React existe também soluções, uma que encontrei foi:

Se quiser criar algo manualmente, fiz um exemplo bem simples usando position: relative; combinado com absolute e JavaScript (classList.toggle), algo assim:

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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .