Search bar toggle effect

Ask the community
,
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.