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!

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:

CLIQUE AQUI E SAIBA MAIS

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