Tengo este codigo, mi idea es que me muestre una lista desplegable. Si yo hago click en cualquier elemento li
deberia mostrarse el div
que está inmediatamente debajo (se imprimen unos 6 li con sus respectivos div)
<ul>
<?php
foreach ($sucursales as $s) {
$id = $s->ID;
$title = $s->post_title;
$desde = CFS()->get('desde', $id);
$hasta = CFS()->get('hasta', $id);
$desde_tarde = CFS()->get('desde_tarde', $id);
$hasta_tarde = CFS()->get('hasta_tarde', $id);
$desde_sabado = CFS()->get('desde_sabado', $id);
$hasta_sabado = CFS()->get('hasta_sabado', $id);
$telefono = CFS()->get('telefono', $id);
$whatsapp = CFS()->get('whatsapp', $id);
$numeromostrar = CFS()->get('numeromostrar_loop', $id);
$email = CFS()->get('email', $id);
?>
<li class="sucursal-individual" data-id="<?php echo $id;?>" data-open="false" data-title="<?php echo $title; ?>" data-desde="<?php echo $desde; ?>" data-hasta="<?php echo $hasta; ?>" data-hasta-tarde="<?php echo $desde_tarde; ?>" data-desde-tarde="<?php echo $hasta_tarde; ?>" data-desde-sabado="<?php echo $desde_sabado; ?>" data-hasta-sabado="<?php echo $hasta_sabado; ?>" data-tel="<?php echo $telefono; ?>" data-wp="<?php echo $whatsapp; ?>" data-nummostrar="<?php echo $numeromostrar; ?>" data-email="<?php echo $email; ?>">
<?php
echo $title;
?>
</li>
<div class="contenido-sucursal-individual hidden" data-id="<?php echo $id;?>">
<?php echo $title; ?>
</div>
<?php
}
?>
</ul>
Y este es mi codigo jQuery
$(".sucursal-individual").on('click', function() {
let id = $(this).data('id');
if ($(this).data('open') == 'false') {
$(this).attr('data-open', 'true')
$(this).data('open', 'true')
$(this).parent().children('div').data('id',id).removeClass('hidden');
} else {
$(this).attr('data-open', 'false')
$(this).data('open', 'false')
$(this).parent().children('div').data('id',id).addClass('hidden');
}
})
Hace casi lo que espero, pero al clickear en un elemento li
despliega todos los div
en lugar de su div
hijo unicamente. Al ocultarlo pasa lo mismo. Creo que el error ocurre en
$(this).parent().children('div').data('id',id).removeClass('hidden');
Cualquier sugerencia es bienvenida, muchas gracias