Currently, I’m using this script to toggle open and closed an info box below the search bar I have. Here is that code.

document.querySelectorAll(“.collapsible”).forEach(function(current) {

let toggler = document.createElement(“div”);
toggler.className = “toggler”;
current.appendChild(toggler);

toggler.addEventListener(“click”, function(e) {
current.classList.toggle(“open”);
}, false);

});

But because this uses li elements, I have to list all the locations (there are 64 of them) on the page. That makes for a very long page and if I display: none; to hide them, my search box no longer functions.

So, to be clear, I want to use your search box because I don’t have to list all of the suggestions below it, but I want the chosen selection to toggle open a box with data I’ve compiled either in the same html page or else as an anchor in another html file on my site. Hope that made sense.
thanks again

Example:
mydomain.com <— that's my domain name
Now someone is looking for "Car parts" on my website, so I want search bar to send him to:
mydomain.com/car-parts
But this search bar is sending to:
mydomain.com/car%parts
And it's not working, any ideas how to solve this?

You have to add codes for that!