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.