I'm encountering a problem with the search feature in the carousel within my FAQ system.
The search box is designed to locate questions within the FAQ list.
Currently, when a user selects a question from the search results, they are redirected to that specific question in the carousel. However, if the selected question is not within the active item of the carousel tab, nothing happens. For example, searching for 'Question 3' while on the first carousel tab does not yield any result (refer to code snippet).
Any suggestions on how I can resolve this issue?
//LOADER
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
// searchbox
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Hide countries when no input is given
if (input.value.length == 0) {
ul.style.display = "none";
return;
} else {
ul.style.display = "block";
}
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
// FAQs
const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion));body{
background-color: #cddadaff;
}
/* - - - - CAROUSEL - - - - */
.carousel-indicators li {
background-color:...