Esconder e mostrar div com HTML/CSS e JavaScript

Поделиться
HTML-код
  • Опубликовано: 7 фев 2025
  • 📒 Ebook gratuito de JavaScript avançado: www.horadecoda...
    Neste vídeo você vai aprender a como esconder ou mostrar uma div de duas formas: primeiramente utilizando #CSS e depois com um evento de #JavaScript
    ★ Nossos Cursos: horadecodar.co...
    ✔ Nosso Blog: horadecodar.co...
    ▶ Instagram: @horadecodar
    ▶ Facebook: / horadecodar 🔷 Telegram: t.me/horadecodar .
    🟣 Discord Hora de Codar: / discord
  • НаукаНаука

Комментарии • 67

  • @MatheusBattisti
    @MatheusBattisti  2 года назад

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

  • @CarvalhoDFabio
    @CarvalhoDFabio 9 месяцев назад +1

    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
    @MatheusBattisti  2 года назад +2

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

    • @charliesilva186
      @charliesilva186 2 года назад

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

  • @walberthvieira
    @walberthvieira Год назад +4

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

  • @vempravida2669
    @vempravida2669 2 года назад +2

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

  • @ViviTeclas
    @ViviTeclas 3 года назад +2

    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
    @resolute8802 Год назад

    VOCÊ É INCRIVEL CARA ME AJUDOU MUITOO

  • @werbson06
    @werbson06 Год назад

    Perfeito exatamente o que eu buscava

  • @menssageiro01
    @menssageiro01 4 года назад +1

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

  • @Pedroeso2
    @Pedroeso2 9 месяцев назад

    tu salvou muito paizão, muito obrigado!

  • @viniciusalves-zn9lj
    @viniciusalves-zn9lj 3 года назад +1

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

    • @MatheusBattisti
      @MatheusBattisti  3 года назад

      de nada Vinicius!

    • @viniciusalves-zn9lj
      @viniciusalves-zn9lj 3 года назад

      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
      @MatheusBattisti  3 года назад +1

      @@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/

  • @rafaellopesdonascimento6043
    @rafaellopesdonascimento6043 2 года назад

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

  • @dhionasribeiromagalhaes2955
    @dhionasribeiromagalhaes2955 2 года назад

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

  • @niedjalucena4626
    @niedjalucena4626 Год назад

    Show demais! 👏🏾

  • @victorcastilho9077
    @victorcastilho9077 2 года назад +2

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

  • @LeonardoFernandes-po7uq
    @LeonardoFernandes-po7uq Год назад

    Valeu cara, ajudou demais!

  • @AskeladdCalvo
    @AskeladdCalvo 3 года назад +1

    Ajudou bastante! Obrigado, mano!!!

  • @biancaalmeida6555
    @biancaalmeida6555 Год назад

    MUITO OBRIGADOOO!!!

  • @joaocarlosdosanjosbrito3351
    @joaocarlosdosanjosbrito3351 2 года назад

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

  • @jccoelho4589
    @jccoelho4589 3 года назад +1

    Ótima dica. Valeu!

  • @lays_stefanny23
    @lays_stefanny23 Год назад

    Perfeito!

  • @PabloDoebber
    @PabloDoebber 2 года назад

    Obrigado pelo vídeo!

  • @GalaxyHellsGamer
    @GalaxyHellsGamer 9 месяцев назад

    Muito obgd.

  • @iagorocha7638
    @iagorocha7638 2 года назад

    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?

  • @dhiovannagabryellyalvesara7738
    @dhiovannagabryellyalvesara7738 3 года назад +1

    Valeu cara vc é top

  • @Two_illusionists_TI
    @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?

  • @Petr_O
    @Petr_O 2 года назад

    valeu 👍

  • @angenifortal9767
    @angenifortal9767 2 года назад

    Top demais sua aulas! Obrigado.

  • @registrarmusica5793
    @registrarmusica5793 2 года назад

    Muito bom. parabéns pelo trabalho.

  • @burgasHoH
    @burgasHoH 4 года назад +1

    Cool video and content ! Great !!!

  • @light-015
    @light-015 11 месяцев назад

    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:
    🔽/🔼

  • @chrystianseixas9704
    @chrystianseixas9704 4 года назад

    Boa irmão, deu boa aqui!

  • @umacameranamao
    @umacameranamao Год назад

    Parabéns pela a dica!

  • @Dabieu
    @Dabieu 4 года назад +3

    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
      @MatheusBattisti  4 года назад +4

      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.

  • @1966fabao
    @1966fabao 3 года назад +1

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

  • @_ohpacheco
    @_ohpacheco 3 года назад +1

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

    • @kelvin8548
      @kelvin8548 3 года назад

      claro! css ou criar botao bootstrap

  • @jairdhyego7544
    @jairdhyego7544 3 года назад

    Qual a diferença entre onclick e click?

  • @daniloadv
    @daniloadv 2 года назад

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

  • @claudioadagio
    @claudioadagio 3 года назад

    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?

  • @erickdeejaymb
    @erickdeejaymb 2 года назад

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

  • @Arielle5000
    @Arielle5000 2 года назад

    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!

  • @charliesilva186
    @charliesilva186 2 года назад

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

  • @manankim
    @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.

  • @baptistajeanbaptiste6832
    @baptistajeanbaptiste6832 3 года назад

    Gostei

  • @Henry_Nunez
    @Henry_Nunez Год назад

    👍👍🏆

  • @raissaalvesfrota6300
    @raissaalvesfrota6300 3 года назад

    genio

    • @lzxyzk
      @lzxyzk 2 года назад

      jenio

  • @hbconsultoriamarketing2913
    @hbconsultoriamarketing2913 2 года назад

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

  • @gabrielgamaalves
    @gabrielgamaalves 3 года назад

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

  • @leonardogoncalvesfotografi8459
    @leonardogoncalvesfotografi8459 3 года назад

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

  • @gaabbriell
    @gaabbriell 2 года назад

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

    • @synkbrain
      @synkbrain 2 года назад +1

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

  • @NiltonOliv
    @NiltonOliv 2 года назад

    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