Skip to main content
4 de 5
adicionou 442 caracteres ao conteúdo

Java script só funciona no primeiro elemento do HTML

Criei uma seção de divs com botão de aparecer e desaparecer o conteúdo das divs ao ser clicado, o script e o html funcionam perfeitamente porém só pro primeiro elemento, quando clico nos demais botões ele altera somente o primeiro elemento. Tipo o java script só funciona para o primeiro Elemento que é encontrado no HTML

A estrutura é essa

$(function(){
        $(".btn-toggle").click(function(e){
           e.preventDefault();
            el = $(this).data('element');
            $(el).toggle();
        });
    });
.btn-toggle{border:1px solid;}

.btn-toggle:hover{background:yellow;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>

<div class="m1" id="minhaDiv">Conteudo</div>

<button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>

<div class="m2" id="minhaDiv">Conteudo</div>

Oque está faltando? Queria que quando clicasse no primeiro elemento mostrasse o conteúdo normal e quando clicar no segundo abrisse o segundo conteúdo da segunda div normal também como se fosse um Acordion.