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>