Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Efeito de menu de perguntas

Bom dia,

estou tentando repetir um efeito de uma pagina que tem as perguntas mais comuns, o site é esse aqui:

https://www.esocialtechne.com.br/#FAQ

Pelo que o pude perceber o texto em seu estado normal fica com display: none; e quando o menu é clicado ele aparece,.

Algumas características que percebi:

1 - A caixa aumenta sua altura de cima pra baixo. 2- Quando o menu e clicado novamente a caixa retorna a seu tamanho normal, e a borda inferior é que "esconde" o texto

Tentei replicar o efeito, mas sem sucesso, quando eu aumento e diminuo minha própria div o texto dela e titulo eles mudam de posição conforme o tamanho da caixa.

muito obrigado.

4 respostas

Oi Gabriel, tudo bem?

O nome desse efeito é "accordion", ou acordeão, encontrado muito normalmente em FAQs como esse que você mandou.

Tem esse exemplo aqui que pode te ajudar nisso. Nesse aí ele faz o esquema fazendo com cada "pergunta do faq" sendo um checkbox. Se ele estiver checkado (pseudoclasse :checked) dá um display block no elemento irmão que venha logo depois (usando o + no seletor do CSS). Porém acredito que a acessibilidade não deve ficar muito bacana, mas aqui tem uma implementação acessível disso.

O Bootstrap também tem uma implementação de um accordeon.

Espero ter ajudado e bons estudos,

Abcs!

Olá Natan blz?

Cara eu consegui fazer descobrir o meu "erro", os meu elementos dentro da div apenas se movem conforme o tamanho dela, quando eu utilizo o:

.display-flex-collumn{
    display: flex;
    flex-flow: column;
}

vc sabe se tem alguma propriedade padrão que faz ele apresenta esse comportamento ?

solução

Oi Gabriel, blz e vc?

Putz não sei te falar de cabeça se existe viu.

Tentaria pegar os códigos que mandei acima e ir vendo o que poderia ser reaproveitado.

Abcs!

Foi isso que eu fiz, deu certo!!!

Só queria saber o porque do display quebrar o resultado.

brigado