searchBox not an addressable component?

export function searchIcon_click(event) {
$w("#searchIcon").onClick((event) => {$w('#searchBox1').show()}

I’m trying to display the search box only after the user clicks on the search icon (a custom SVG graphic).

The above code shows an error saying #searchBox1 is not a valid selector, even though I do have the component with this name in the header of the page and the code editor’s own auto-complete is suggesting ‘#searchBox1’ as I type.

Any ideas?

What are you using as a search box?

The standard Wix Search Bar component.

I added a search box to a header on a test site, and the following code works just fine:

$w.onReady(function () {
 // TODO: write your page related code here...
    $w('#searchBox1').hide();
});

The above code successfully hides the search bar. If I comment out the line that has hide(), then the search box appears in the header.

No dice.

Does the fact that searchBox1 in my case is in the header make a difference?