Ir para conteúdo

Recommended Posts

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

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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.