Search bar toggle effect

Ask the community
,
1

Hello,
What code could I implement to have the search bar effect you see on this website: oceancleanup . com
I have found a few solutions but they used html+css+js

Thank you in advance

2

Here’s a very simple example:

First, add the following screen elements as shown below:

Text input field with #inputSearch ID. (set to hidden in the Editor)
Search Icon button with #btnSearch ID.
X Icon button with #btnX ID (set to hidden in the Editor)
Note that the two buttons are one on top of the other.

888×246 6.54 KB

Add the following code to your page:

$w.onReady(function () {
    let slideOptions = {
        "direction": 'right'
    };
    $w("#btnSearch").onClick((event) => {
        $w('#inputSearch').show('slide', slideOptions);
        $w('#btnSearch').hide();
        $w('#btnX').show();
    });
    $w("#btnX").onClick((event) => {
        $w('#inputSearch').hide('slide', slideOptions);
        $w('#btnSearch').show();
        $w('#btnX').hide();
    });
});

This should give you a good start. You can play with the options, layout, element design and so on.

3

it didn’t work for me

4

@volivette20 What do you have so far? Do you have the 3 screen elements with the proper IDs? Did you add the code to the page? What isn’t working?

5

I cannot close the search afterwards, and I could not rename the search bar therefore I edited the code but it doesn’t close afterwards. It says: property ‘show’ does not exist on type ‘Node’ and for ‘hide’

798×491 19.5 KB

6

Hello. sorry to bother this is for a project and I have little time left, if anybody knows how to fix the issue pls respond, thank u :slight_smile:

7

The element with the #searchAppController4 ID does not have the show or hide functions. I don’t know what that element is, but you should be able to attach this element to a Box Element and then show or hide the Box. See the article Wix Editor: Attaching Elements to a Box for details on on how to attach an element to a Box.

8

that element is a search bar and it is the default name editor x offers, my question since the beginning was about a search bar, once attached to a box there are errors everywhere and the search bar does not appear, could I add a property to the search bar to show and hide ? thank u for your response and I wish I could have a solution for this :slight_smile:

9

Are you using the Wix Site Search ?

10

I added the Wix Site Search app to a test site, and attached the search bar to a Box as I described previously. It looks like this in the Editor:

1416×200 13.4 KB

The following code properly slides the Box (which contains the search bar) in and out.

$w.onReady(function () {
    let slideOptions = {
        "direction": 'right'
    };
    $w("#btnSearch").onClick((event) => {
        $w('#boxSearch').show('slide', slideOptions);
        $w('#btnSearch').hide();
        $w('#btnX').show();
    });
    $w("#btnX").onClick((event) => {
        $w('#boxSearch').hide('slide', slideOptions);
        $w('#btnSearch').show();
        $w('#btnX').hide();
    });
});