Estoy intentando hacer un menú con una serie de botones y cada botón contiene un div con informacion traida de la base de datos.
El problema es que al mostrarse los botones, si hago click en el primer botón, me muestra el div. Pero si hago click en los otros botones, me muestran el div del primer botón. Y yo necesito que cada botón muestre su div correspondiente.
Les muestro con unas imagenes y luego el código:
1) Estos son los distintos botones:
2) Si hago click en el primero, me abre lo que van a ver a continuación. Lo que yo necesito es que cuando haga click en otro botón distinto al primero, abra su div correspondiente, y no siempre el mismo que contiene al botón CLÁSICO:
Acá va el código:
HTML + PHP
<div class="container-fluid categoriasMobile">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<h2><small><center>¿Qué te gustaría comer?</center></small></h2>
</div>
<div class="col-xs-12" id="categorias">
<?php
$item = null;
$valor = null;
$categorias = ControladorProductos::ctrMostrarCategorias($item, $valor);
foreach ($categorias as $key => $value) {
echo '<div class="col-xs-6 btnCategoriasMobile">
<button onclick="mostrarSubcategorias()" class="btn btn-default backColor btn-block btnCategoriasMobile">
<a class="pixelCategorias">'.$value["categoria"].'</a>
</button>
<div id="subcatOcultas"';
$item = "id_categoria";
$valor = $value["id"];
$subcategorias = ControladorProductos::ctrMostrarSubCategorias($item, $valor);
foreach ($subcategorias as $key => $value) {
echo '<li><center><a href="'.$url.$value["ruta"].'" class="pixelSubCategorias">'.$value["subcategoria"].'</a></center></li>';
}
echo '</div>
</div>';
}
?>
</div>
</div>
</div>
</div>
</div>
Javascript:
function mostrarSubcategorias() {
var x = document.getElementById("subcatOcultas");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}