1

Estoy trabajando en un acordeón anidado para mostrar preguntas y respuestas. Ahora mismo cuando cargo el HTML ya funciona tal y como espero. El problema viene al tratar de desplegar cualquiera de sus parte accediendo a él desde una URL externa manteniendo el resto de funcionalidad sin que se rompa.

Lo he intentado con:

<script type="text/javascript">
    $(document).ready(function () {
        if(location.hash != null && location.hash != ""){
         ...
        }

    });
</script>

Sin éxito. Si alguien puede ayudarme estaría muy agradecida. Podéis ver el código completo del experimento en este snippet:

// Añade evento click a todos .accordian-title
$(".accordian-title").click(function() {

// Comprueba si hay alguno activo
wasActive = $(this).closest(".accordian-element").hasClass("active");

// Elimina clase .active de hermanos
$(this).closest(".accordian-wrapper").find(".accordian-element.active").removeClass("active");

// Activa clicked .accordian-element si no estaba active
if (wasActive != true) {
  $(this).closest(".accordian-element").toggleClass("active");
}

});


// Inicia el código de búsqueda después de cualquier cambio en la entrada
$("#search").on('change keydown paste input', function() {

// Eliminar coincidencia de términos de búsqueda
$(".accordian-wrapper .found-term").removeClass("found-term");

// Elimina todas las clases active
$(".accordian-wrapper .accordian-element.active").removeClass("active");

// Obtener término de búsqueda
searchTerm = $(this).val().toUpperCase();

// Salir si el término de búsqueda está vacío
if (searchTerm == "") {
  $(".accordian-wrapper").removeClass("searched");
  return;
}

$(".accordian-wrapper").addClass("searched");

// Verifica cualquier cosa dentro de un acordeón contra el término
$(".accordian-wrapper *").each(function() {

  // Obtenga texto solo de este elemento (no hijos)
  tempText = $(this).immediateText().toUpperCase();

  // Comprobar si el término de búsqueda está presente en el elemento
  if (tempText.indexOf(searchTerm) >= 0) {

    // Agregar término encontrado para resaltar el elemento con el texto de búsqueda
    $(this).addClass("found-term");

    // Activar a todas las padres acordeones para que sea visible.
    $(this).parents(".accordian-element").addClass("active");

  }

});

});


// Obtener el texto del elemento dado, pero no sus hijos
$.fn.immediateText = function() {
return this.contents().not(this.children()).text();
};
 body {
        font-family: sans-serif;
    }
/* Estilos para mostrar/ocultar on click */
.accordian-content {
    display: none;
    padding: 12px;
    line-height: 24px;
    font-size: 14px;
    color: #a1a1a1;
    font-weight: 200;
}
.accordian-element.active>.accordian-content {
  display: inherit;
}
.accordian-title {
    cursor: pointer;
    padding-left: 0;
    font-weight: 400;
    width: 97%;
    float: right;
    display: inline;
    margin: 0;
}


/* Estilos para buscar contenido y resaltarlo */
.accordian-wrapper.searched .accordian-element {
  display: none;
}
.accordian-wrapper.searched .accordian-element.active {
  display: inherit;
}
.found-term {
  color: red;
}


/* Estilos generales */
.accordian-wrapper {
  
}
.accordian-element:before {
    content: "+";
    display: inline-block;
    color:red;
}
.accordian-element.active:before {
    content:"-";
    display: inline-block;
}
.accordian-element, .busqueda {
    padding: 18px;
    border: 1px solid #ececec;
    margin-bottom: 18px;
    width: 70%;
    margin: 0 auto 10px;
}
.accordian-element:hover, .busqueda:hover {
    box-shadow: 0 10px 10px #f5f5f5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="busqueda">Buscar: <input id="search"></div>

<hr style="margin: 20px 0px;">

<div class="accordian-wrapper">

  <div id="#1" class="accordian-element">

    <h4 class="accordian-title">Lorem ipsum dolor sit amet</h4>
    <div class="accordian-content">

      <p>Integer risus mi, dignissim nec sollicitudin nec, sollicitudin euismod mi. Duis a dolor suscipit, hendrerit urna et, fermentum lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam sit amet pharetra mauris. Sed eu ante a eros lacinia sollicitudin at a risus. Proin convallis turpis eu dui blandit, in lobortis mi fermentum. Pellentesque non nisl sit amet diam tincidunt egestas vitae eget mi. Nullam scelerisque nunc vel ipsum laoreet efficitur. Suspendisse dictum ex eget volutpat fermentum. Praesent suscipit sit amet ligula ac lacinia. Aenean blandit lectus eget augue tincidunt imperdiet. Quisque rhoncus dui eu eleifend mollis. Etiam at quam lorem. Integer placerat magna metus, nec congue nisi viverra vel. Nam finibus sit amet arcu vel blandit.</p>

      <div class="accordian-wrapper">

        <div id="#2" class="accordian-element">
          <h4 class="accordian-title">Integer risus mi, dignissim nec sollicitudin nec</h4>
          <div class="accordian-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet vel orci non dignissim. Mauris suscipit dolor elit, ac feugiat nisi varius eget. Etiam quis tristique erat. Maecenas diam lacus, egestas et fringilla in, luctus eget sapien. Quisque sed finibus massa. Etiam ac nibh orci. </p>
          </div>
        </div>

        <div id="#3" class="accordian-element">
          <h4 class="accordian-title">Suspendisse tellus quam</h4>
          <div class="accordian-content">
            <p>Aenean fermentum leo sit amet leo placerat venenatis. Praesent lacinia iaculis mollis. Maecenas euismod nisl sit amet nunc molestie, id lobortis magna interdum. Praesent ut lectus et ex mattis porta. Donec id neque mollis, tristique odio sit amet, gravida tellus. Nam vel efficitur metus. Maecenas eget augue purus. Nunc sapien dolor, fermentum vitae tortor a, facilisis tempus ante. Aenean eleifend ipsum eget mauris tempor finibus et sit amet lorem. Nunc at vehicula est. Mauris quis hendrerit risus, id mollis nunc. Cras vel sagittis sem. Sed odio nisi, imperdiet eget dolor ut, ultrices egestas ante. Morbi dapibus libero eget lectus commodo, non ultricies diam pretium. Nullam sed massa et orci viverra tincidunt. Pellentesque venenatis bibendum suscipit.</p>
          </div>
        </div>

      </div>

    </div>

  </div>

  <div id="#4" class="accordian-element">

    <h4 class="accordian-title">Etiam at quam lorem.</h4>
    <div class="accordian-content">
      <p>Quisque rhoncus dui eu eleifend mollis. Etiam at quam lorem. Integer placerat magna metus, nec congue nisi viverra vel. Nam finibus sit amet arcu vel blandit.</p>
    </div>

  </div>

  <div id="#5" class="accordian-element">

    <h4 class="accordian-title">Nullam in lorem ultricies</h4>
    <div class="accordian-content">
      <p>Vestibulum nec felis ligula. Nunc tristique nisi nec tellus euismod, a bibendum eros finibus. Vestibulum elit nisl, consectetur id est quis, aliquam fringilla arcu. Ut in neque ligula. Sed magna arcu, sagittis vitae justo sed, lobortis faucibus libero. Pellentesque porttitor sed massa non pulvinar. Mauris tempus lacinia velit, imperdiet tristique justo tempus pulvinar. Nullam in lorem ultricies, mattis magna at, imperdiet nibh.

            Integer risus mi, dignissim nec sollicitudin nec, sollicitudin euismod mi. Duis a dolor suscipit, hendrerit urna et, fermentum lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam sit amet pharetra mauris. Sed eu ante a eros lacinia sollicitudin at a risus. Proin convallis turpis eu dui blandit, in lobortis mi fermentum. Pellentesque non nisl sit amet diam tincidunt egestas vitae eget mi. Nullam scelerisque nunc vel ipsum laoreet efficitur. Suspendisse dictum ex eget volutpat fermentum. Praesent suscipit sit amet ligula ac lacinia. Aenean blandit lectus eget augue tincidunt imperdiet. Quisque rhoncus dui eu eleifend mollis. Etiam at quam lorem. Integer placerat magna metus, nec congue nisi viverra vel. Nam finibus sit amet arcu vel blandit.
            
            Aenean fermentum leo sit amet leo placerat venenatis. Praesent lacinia iaculis mollis. Maecenas euismod nisl sit amet nunc molestie, id lobortis magna interdum. Praesent ut lectus et ex mattis porta. Donec id neque mollis, tristique odio sit amet, gravida tellus. Nam vel efficitur metus. Maecenas eget augue purus. Nunc sapien dolor, fermentum vitae tortor a, facilisis tempus ante. Aenean eleifend ipsum eget mauris tempor finibus et sit amet lorem. Nunc at vehicula est. Mauris quis hendrerit risus, id mollis nunc. Cras vel sagittis sem. Sed odio nisi, imperdiet eget dolor ut, ultrices egestas ante. Morbi dapibus libero eget lectus commodo, non ultricies diam pretium. Nullam sed massa et orci viverra tincidunt. Pellentesque venenatis bibendum suscipit.
            
            Suspendisse tellus quam, elementum accumsan ante non, maximus consequat orci. Nunc feugiat, risus eu tincidunt tristique, odio sapien cursus diam, eget euismod diam ligula sed dui. Nulla ac sapien enim. In ipsum magna, semper vitae fermentum quis, ornare at odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur a urna at orci porttitor vestibulum id ut tellus. Proin malesuada tincidunt congue. Morbi a commodo quam, vel tincidunt justo. Quisque nunc massa, molestie sed nibh in, congue feugiat magna. Sed auctor ac mauris nec viverra. Ut pretium nunc non arcu efficitur, id semper lectus sodales. Pellentesque a pellentesque tortor.</p>
    </div>

  </div>

</div>

3
  • Pon un ejemplo mínimo verificable del código en la pregunta. Además, pon en las etiquetas con qué lenguajes/frameworks estás trabajando. Lee Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    el 24 ene. 2022 a las 11:37
  • por favor, el codigo debe ir en la pregunta.. inclusive, la pagina te permite ejecutar js desde aca mismo...
    – gbianchi
    el 24 ene. 2022 a las 13:34
  • Es la primera vez que utilizo esta plataforma. Me queda mucho por descubrir. Acabo de dejar el código
    – Gina VG
    el 24 ene. 2022 a las 14:21

1 respuesta 1

0

He realizado estas modificaciones y me ha funcionado (al menos aparéntemente):

En todos los id="# le que quitado el símbolo # porque es un simbolo usado en las URL para reconocer los ids, no para ponerlo dentro del id=.

Despues he modificado tu javascript, agregando esto al principio:

var hash = window.location.hash.substr(1)

if(hash != null && hash != ""){
  direct = $('#' + hash);

  // Comprueba si hay alguno activo
  wasActive = direct.closest(".accordian-element").hasClass("active");

  // Elimina clase .active de hermanos
  direct.closest(".accordian-wrapper").find(".accordian-element.active").removeClass("active");

  // Activa clicked .accordian-element si no estaba active
  if (wasActive != true) {
    direct.parents(".accordian-element").toggleClass("active");
    direct.closest(".accordian-element").toggleClass("active");
  }

}

Como ves, has estado cerca de solucionarlo, pues practicamente no he hecho nada nuevo, solo duplicar parte de tu código y cambiar los $(this) por direct, que es el valor recogido desde la url mediante la asignación que ves.

Tambien he agregado esta línea:

direct.parents(".accordian-element").toggleClass("active");

para que me abra los parents en caso que este anidada en otro accordian-element.

Espero que te sirva.

2
  • Muchas gracias por tu aportación. Es de gran valor para mi. Se me ha ido el fin de semana en un bucle continuo de errores de enfoque.
    – Gina VG
    el 24 ene. 2022 a las 15:01
  • Si esta respuesta resuelve tu problema debes agradecermelo aceptando la respuesta. Es la forma que tenemos de agradecer las cosas aquí :-) Aqui te dejo un enlace de porque es importante acepar respuestas y este otro enlace explicando como aceptarlas
    – masterguru
    el 24 ene. 2022 a las 16:55

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.