Search code examples
javascriptgetuikit

Call Uikit.toggle on click

I would like to focus a input and toggle the search field by using a tiny JS method.

This is the element I am using: https://getuikit.com/docs/search#toggle

And this is my codepen-example of what I did so far: https://codepen.io/anon/pen/bQGVdw

So what happens: The search-input is not visible, as it's not "toggled":

 <div class="uk-navbar-right">
    <div>
        <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
        <div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0">
            <form class="uk-search uk-search-navbar uk-width-1-1">
                <input id="searchbar" class="uk-search-input" type="search" placeholder="Search..." autofocus>
            </form>
        </div>
    </div>

My question: How can I focus the field and toggle it, so it's visible?

Solution

  • I think focussing the search input isn’t enough. Try to invoke a click event on the <a> element wrapped around the search input instead.

    Example: https://codepen.io/anon/pen/MzQmJJ