Esconder e mostrar div com HTML/CSS e JavaScript

[@MatheusBattisti]

⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/

[@CarvalhoDFabio]

uau, eu estava com dificuldades no meu projeto por que nele eu quero poder ter dois botões de ocultar div, pra deixar o projeto "limpo" e sofisticado, porém, eu estava usando o mesmo código java pra antes e um estava influenciando o outro, agora no seu código eu não só resolvi isso, como também com sua didatica eu consegui melhorar o código, gratidão!!!

[@MatheusBattisti]

📒 Ebook gratuito de JavaScript avançado: www.horadecodar.com.br/ebook-javascript-avancado-gratuito/

[@charliesilva186]

Vc é ótimo , continue com seus ótimos vídeos

[@walberthvieira]

Tem como animar essa exibição? escorregar de cima pra baixo?

[@ViviTeclas]

Estou quase chegando no que eu quero que é fazer tipo um quiz com perguntas, respostas e pontuação no final. Tá difícil de encontrar, mas esse vídeo já me deu uma luzinha.

[@resolute8802]

VOCÊ É INCRIVEL CARA ME AJUDOU MUITOO

[@werbson06]

Perfeito exatamente o que eu buscava

[@vempravida2669]

Cara você é fera D++++!!!

[@MatheusBattisti]

valeu! =D

[@menssageiro01]

Show de Bola, parabéns pelo trabalho, recebi do nada o seu vídeo e estou agradecido.

[@MatheusBattisti]

valeuu Luciano, tamo junto!

[@Pedroeso2]

tu salvou muito paizão, muito obrigado!

[@rafaellopesdonascimento6043]

Esse vídeo matou uma dúvida que tinha faz tempo, obrigado ai cara

[@dhionasribeiromagalhaes2955]

Muito obrigado, você me salvou cara. Explicação simples e sem firulas.

[@viniciusalves-zn9lj]

Tava quebrando a cabeça pra fazer isso no meu projeto, muito obrigado

[@MatheusBattisti]

de nada Vinicius!

[@viniciusalves-zn9lj]

Esperando seu curso entrar em promoção na Udemy, eu tentei fazer outros cursos , mas sua didática de colocar os slides antes, indicando as coisas importantes, ajuda muito, divulga mais quando tiver promoção dos cursos

[@MatheusBattisti]

@@viniciusalves-zn9lj oi Vinicius, só se inscrever na minha lista que tu vai receber as promoções assim que saem, basta baixar o ebook na home do blog: www.horadecodar.com.br/

[@AskeladdCalvo]

Ajudou bastante! Obrigado, mano!!!

[@MatheusBattisti]

de nada Rodrigo!

[@niedjalucena4626]

Show demais! 👏🏾

[@joaocarlosdosanjosbrito3351]

Valeu man, ajudou bastante, faltava isso para um entregar um projeto do estágio. kkkk

[@LeonardoFernandes-po7uq]

Valeu cara, ajudou demais!

[@angenifortal9767]

Top demais sua aulas! Obrigado.

[@victorcastilho9077]

Tem como fazer isso acontecer só passando o mouse por cima? Como seria?

[@registrarmusica5793]

Muito bom. parabéns pelo trabalho.

[@jccoelho4589]

Ótima dica. Valeu!

[@MatheusBattisti]

de nada! =)

[@GalaxyHellsGamer]

Muito obgd.

[@biancaalmeida6555]

MUITO OBRIGADOOO!!!

[@1966fabao]

se eu fosse trabalhar com 03 div ? seria muito complicado implementar?

[@PabloDoebber]

Obrigado pelo vídeo!

[@iagorocha7638]

Cara, quando eu crio o botão toggle, ele mostra normalmente o conteúdo quando eu clico, mas se eu clicar pra fechar, ele não fecha, fica agarrado no collapse show. O que pode estar acontecendo?

[@umacameranamao]

Parabéns pela a dica!

[@dhiovannagabryellyalvesara7738]

Valeu cara vc é top

[@MatheusBattisti]

obrigado! =)

[@light-015]

9:31 - Tem como, ao invés de eu escrever "esconder/mostrar", colocar um símbolo? O código funcionaria? Colocar esses símbolos, por exemplo: 🔽/🔼

[@Dabieu]

Bom vídeo Matheus, existe alguma diferença entre usar esse método do vídeo, ou usar o atributo onclick no html para chamar uma função no js?

[@MatheusBattisti]

oi Dabieu, beleza? No fim das contas o resultado final é o mesmo, mas você cria uma acoplação desnecessária de JS em HTML, o que é uma má prática, como CSS no HTML também, o ideal é separar as responsabilidades, para cada arquivo cuidar de uma linguagem específica, facilitando a manutenção do projeto.

[@chrystianseixas9704]

Boa irmão, deu boa aqui!

[@MatheusBattisti]

show!

[@Two_illusionists_TI]

e se eu tiver duas divs na mesma posição e quero que quando ela apareça a outra suma, o que devo acrescentar?

[@burgasHoH]

Cool video and content ! Great !!!

[@Petr_O]

valeu 👍

[@_ohpacheco]

Muito bom!! Existe a possibilidade de animar o efeito de exibir e ocultar?

[@kelvin8548]

claro! css ou criar botao bootstrap

[@jairdhyego7544]

Qual a diferença entre onclick e click?

[@claudioadagio]

Professor o eddEventListner não funciona comigo. O evento click não funciona por isso eu uso onClick no Button. Oque pode ter de errado?

[@lays_stefanny23]

Perfeito!

[@daniloadv]

Matheus, como faz isso no *ngIf do angular com typescript?

[@canalsobreira6433]

Tbm queria saber, no type tá dando erro

[@erickdeejaymb]

Seria possível usar essa mesma técnica mas para ser exibido somente quando um determinado vídeo fosse visto até o final?

[@charliesilva186]

Como é feito o HTML que faz a cobertura de ocultação de um jogo de campo minado .

[@Arielle5000]

Gostaria de mostrar/esconder mais de uma div com um botão, como posso fazer isso? Tentei aqui e não funciona de jeito nenhum!

[@leonardogoncalvesfotografi8459]

Muito bom o vídeo, mas aqui não funcionou, não reconhece o style.display

[@gabrielgamaalves]

O meu ouve um problema porem não consigo resolver, pode me ajudar?

[@hbconsultoriamarketing2913]

PRECISO OCULTAR DE ACORDO COM A URL, NÃO ACHEI EM NUNHUM LUGAR...

[@manankim]

eu tenho um problema mais complexo. Preciso esconder/aparecer com vários elementos na telas, mas mas nao são divs, são classes. E nenhum exemplo funciona.

[@gaabbriell]

E como eu esconderia vários elementos de uma vez?

[@synkbrain]

coloca tudo que vc quer ocultar numa div e oculta essa div

[@raissaalvesfrota6300]

genio

[@lzxyzk]

jenio

[@baptistajeanbaptiste6832]

Gostei

[@MatheusBattisti]

Valeuuu

[@Henry_Nunez]

👍👍🏆

[@NiltonOliv]

Amigo, fiz três botões usando o pagination do bootstrap e três div, com o id de cada uma. A primeira div usa a classe active, e no javascript tenho que ativar quando clicar no botão correspondente a div. Pode me ajudar. Fiz abaixo mas deu erro: function paginar(){ var id1 = document.getElementById('id1 ').style.display; var id2 = document.getElementById('id2 ').style.display; var id3 = document.getElementById('id3 ').style.display; if(pag1 == "none") { // Bolo de Abacaxi document.getElementById('id1 ').style.display = 'block'; document.getElementById('id2 ').style.display = 'none'; document.getElementById('id3 ').style.display = 'none'; } else if(pag2 == "none") { // Bolo de Cenoura document.getElementById('id2 ').style.display = 'block'; document.getElementById('id1 ').style.display = 'none'; document.getElementById('id3 ').style.display = 'none'; } else if(pag3 == "none") { // Bolo de Chocolate document.getElementById('id3 ').style.display = 'block'; document.getElementById('id1 ').style.display = 'none'; document.getElementById('id2 ').style.display = 'none'; } } No style.css .item{ display: none; } .item, .active{ display: block; } 1 2 3