1

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

1 respuesta 1

1

Podrías resolverlo usando:

Obtiene el hermano inmediatamente siguiente de cada elemento en el conjunto de elementos coincidentes.

Agrega o elimina una o más clases de cada elemento en el conjunto de elementos coincidentes, según la presencia de la clase o el valor del argumento de estado.

Ejemplo:

$(".sucursal-individual").on('click', function() {
  $(this).next().toggleClass('hidden');
})
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
  <li class="sucursal-individual">
    Titulo 1
  </li>
  <div class="contenido-sucursal-individual hidden">
    Mensaje 1
  </div>
  <li class="sucursal-individual">
    Titulo 2
  </li>
  <div class="contenido-sucursal-individual hidden">
    Mensaje 2
  </div>
</ul>

1
  • Muchas gracias! No conocia esa funcion!
    – Agustin G.
    Commented el 20 abr. 2021 a las 19:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.