es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Efecto jQuery – Ocultar y Mostrar

19 Jul, 2023 Programación

Hola, acabo de crear un efecto de ocultar y mostrar con jQuery, pero cuando hago clic en uno, el otro se abre automáticamente. Solo quiero que se abra el que hice clic, no ambos.
Espero que entiendas mi punto, ¿qué me falta aquí??

$(document).ready(function() {
  $(".flip").click(function() {
    $(".panel").toggle();
  });
});

div.panel,
p.flip {
  line-height: 30px;
  margin: auto;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  background: #555;
  border: solid 1px #666;
  color: #ffffff;
  border-radius: 3px;
  user-select: none
}

div.panel {
  display: none;
}

p.flip {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="flip">Haz clic para mostrar/ocultar el panel</p>
<div class="panel" style="display: none;">
  <p>ayuda</p>
  <p>necesito ayuda</p>
</div>

<p class="flip">Haz clic para mostrar/ocultar el panel</p>
<div class="panel" style="display: none;">
  <p>mostrar</p>
  <p>ocultar</p>
</div>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar el problema de que al hacer clic en un flip se abra automáticamente el otro, es necesario modificar el código de jQuery. En lugar de alternar todos los elementos con la clase “panel” cuando se hace clic en cualquier elemento flip, solo se desea alternar el elemento panel que sea hermano del elemento flip clickeado.

    Aquí está el código actualizado de jQuery con comentarios:

    $(document).ready(function() {
  $(".flip").click(function() {
    // Obtener el elemento panel que es hermano del elemento flip clickeado
    var panel = $(this).next(".panel");
    // Alternar el elemento panel
    panel.toggle();
    // Ocultar cualquier otro panel abierto que no sea hermano del elemento flip clickeado
    $(".panel").not(panel).hide();
  });
});

    Con esta modificación, solo se abrirá el elemento panel que sea hermano del elemento flip clickeado y se ocultarán cualquier otro panel abierto.

Comments are closed.