renan mafra 0 Denunciar post Postado Outubro 21, 2019 Olá pessoal, Sou iniciante em CSS e JS. Gostaria de fazer alguns links, um debaixo do outro e quando clicasse no link ele abriria uma paragrafo abaixo dele empurrando os outros links para baixo, seria tipo um breve resumo abaixo do link e ao se clicar em outro o clicado anteriormente se retraia e abria o atual. Alguém pode dar um help ? to quebrando a cabeça aqui e não tá dando certo. Ex: Texto 01 //Foi clicado Este é um texto descritivo com um pequeno resumo caso querira saber mais clique aqui: Texto 02 Texto 03 Texto 04 Obrigado pessoal ! Compartilhar este post Link para o post Compartilhar em outros sites
Omar~ 87 Denunciar post Postado Outubro 21, 2019 <style> .escondido {display: none} .escondido.mostar {display: block} </style> <div> <button class="exemplo">Exemplo 1</button> <div class="escondido"> Exemplo 1 </div> </div> <div> <button class="exemplo">Exemplo 2</button> <div class="escondido"> Exemplo 2 </div> </div> <div> <button class="exemplo">Exemplo 3</button> <div class="escondido"> Exemplo 2 </div> </div> <script> var botao = document.getElementsByClassName('exemplo'); for (var i = 0; i < botao.length; i++) { botao[i].addEventListener('click', function () { this.nextElementSibling.classList.toggle('mostar'); }, false); } </script> Veja também: https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion Compartilhar este post Link para o post Compartilhar em outros sites
renan mafra 0 Denunciar post Postado Outubro 21, 2019 Estou testando aqui, é isso mesmo, mas, não era para ser botão, era para ser link de texto normal. Se não for muito pode dar esse help ? Enquanto isso to tentando aqui. Compartilhar este post Link para o post Compartilhar em outros sites
Omar~ 87 Denunciar post Postado Outubro 22, 2019 Em 21/10/2019 at 12:56, renan mafra disse: era para ser link de texto normal Uai! Mude a tag <button> para <a> ou <div>, <p>. O resto é feito pelo CSS. Compartilhar este post Link para o post Compartilhar em outros sites
renan mafra 0 Denunciar post Postado Outubro 22, 2019 fiz isso, vlw !!!!!!!!!!!!! Compartilhar este post Link para o post Compartilhar em outros sites