Salovid - Tecnologias da Prática

Blog de Tecnologia

Requisitos para Projetar um Sistema de gestão pela Internet27/12/2017

Como mostrar ou ocultar informação no texto

No meio ou no fim de um parágrafo de texto da página html, adicionar a seguinte tag de âncora:
  • <a href "#" class="more"> ..Leia Mais..</a>

  • Leia mais../..menos
  • No campo entre <head>... e... </head> adicionar o link para o jquery via site do google ou da microsoft:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    ou
    <script src= "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

    Obs.: existem outros métodos, mas esse acima é melhor, porque será mais rápido, devido as informações ficarem em cache online dos grandes servidores Google e Microsoft.

  • Também no campo entre <head>... e... </head> adicionar a tag para CSS: <style> .oculta { display: none; } </style>, na qual ocultará o texto.

  • Criar a seguinte âncora para mostrar o conteúdo ocultado <a href="#" class="more">..Leia Mais..</a>

  • Criar uma tag <div class="oculta">..com texto a ser ocultado....entre as tags div.... </div>

  • No final do set de tags , antes de terminar a tag ... </body> adicionar o seguinte script:

    <script>
    $(document).ready(function(){
    $('.more').click(function(){
    $('.oculta').slideToggle();
    });
    });
    </script>

A informação poderá ser mostrada livremente, ou será solicitada uma permissão ou senha para continuar lendo a informação restante, quando se clicar em "Leia mais", cuja programação para esse propósito será em PHP e SQL.

Segue um exemplo de código fazendo uso dessa aplicação...


<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de Ocultar ou Mostrar Texto></title>
<meta charset="UTF-8"/>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
.oculta {
display:none;
}
</style>
</head>
<body>
<h1>Mostrando e ocultando texto</h1>
<h2>O texto Lorem ipusun é feito para

<a href ="#" class="more">..Leia Mais..</a>

<div class="oculta">
webdesigners, designers, diagramadores e usuários dessa
técnica, para evitar que os leitores percam foco na leitura,
em vez de analisarem o lay-out de diagramação.
Desde os anos 1500 vem sendo empregado para as
diagramações e tipagens....etc... etc..</p>
</div>
</h2>
<script>
$(document).ready(function(){
$('.more').click(function(){
$('.oculta').slideToggle();
});
});
</script>
</body>
</html>

« 1 2 3 »