Como mostrar e ocultar informações na tela com CSS

Benedito Silva Júnior 15/11/2021

Mostrar e ocultar informações na tela pode ser uma excelente forma de melhorar a experiência do usuário e organizar conteúdos em um site. Neste post, vamos explorar como mostrar e ocultar informações na tela com CSS.

A importância de ocultar informações

Em um mundo digital onde a experiência do usuário é fundamental, a capacidade de exibir ou ocultar informações de forma eficiente pode transformar a interação com um site.

Técnicas de design responsivo e acessibilidade não apenas ajudam a manter o layout limpo, mas também permitem que os visitantes do site escolham o que desejam visualizar.

O CSS, aliado a um pouco de JavaScript, proporciona uma maneira simples e elegante de gerenciar esses elementos visuais. Neste post, vamos explorar como implementar funcionalidades que permitem mostrar e ocultar informações, melhorando a usabilidade e a estética do seu site. Vamos nos aprofundar na construção de um exemplo prático, garantindo que você tenha todas as ferramentas necessárias para aplicar essa técnica em seus projetos!

1. Estrutura HTML básica

Comece com uma estrutura simples que inclui um botão para mostrar ou ocultar informações. Veja um exemplo:

<button class="toggle-button">Mostrar mais</button>
<div class="informacao oculta">
    <p>Esta é uma informação oculta que pode ser revelada ao clicar no botão acima.</p>
</div>

2. Estilos CSS

Vamos definir os estilos básicos para a informação oculta e visível:

.informacao {
    display: none; /* Inicialmente oculta */
}

.informacao.visivel {
    display: block; /* Exibe quando a classe 'visivel' é adicionada */
}

3. Interação com JavaScript

Embora o CSS sozinho não possa alternar classes, você pode usar um pequeno script JavaScript para isso:

const button = document.querySelector('.toggle-button');
const info = document.querySelector('.informacao');

button.addEventListener('click', () => {
    info.classList.toggle('visivel'); // Alterna a classe 'visivel'
    button.textContent = info.classList.contains('visivel') ? 'Ocultar' : 'Mostrar mais';
});

4. Exemplo completo

Veja um exemplo completo que combina HTML, CSS e JavaScript:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mostrar e Ocultar Informações</title>
    <style>
        .informacao {
            display: none;
        }
        .informacao.visivel {
            display: block;
        }
    </style>
</head>
<body>
    <button class="toggle-button">Mostrar mais</button>
    <div class="informacao">
        <p>Esta é uma informação oculta que pode ser revelada ao clicar no botão acima.</p>
    </div>
    <script>
        const button = document.querySelector('.toggle-button');
        const info = document.querySelector('.informacao');

        button.addEventListener('click', () => {
            info.classList.toggle('visivel');
            button.textContent = info.classList.contains('visivel') ? 'Ocultar' : 'Mostrar mais';
        });
    </script>
</body>
</html>

Outro exemplo prático

<div class="pre-spoiler">

<input id="xs" value="Mostrar conteúdo" style="margin-left: 100px; padding: 0px; width: 120px; 
"onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')
[0].style.display != '')
{ 	
this.parentNode.parentNode.getElementsByTagName('div')[1]
.getElementsByTagName('div')[0].style.display = '';this.innerText = ''; 	
this.value = 'Ocultar conteúdo'; 
} 
else 
{ 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].
style.display = 'none'; this.value = 'Mostrar conteúdo';}" type="button"> 
</div>

<div>
	<div class="spoiler" style="display: none;">
	Entre aqui com o conteúdo a ser ocultado/mostrado aqui.   
	</div>
</div>

Mostrar e ocultar informações é uma técnica eficaz para melhorar a usabilidade e a estética de um site.

Usando CSS e JavaScript, você pode facilmente criar interações que permitem ao usuário controlar o que deseja ver. Experimente adicionar essa funcionalidade ao seu projeto e veja como ela pode beneficiar a experiência do usuário!

Dúvidas ou sugestões sobre como mostrar e ocultar informações na tela com CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

O seu computador está lento, travando ou dando tela azul… e você não faz ideia do que fazer?
Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.
Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.
Você pode usar esse conhecimento para:
✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.
👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe: