Expandir link

[renan mafra 0]

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 !

[Omar~ 87]

<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

 

[renan mafra 0]

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.

[Omar~ 87]

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.

[renan mafra 0]

fiz isso, vlw !!!!!!!!!!!!!