jQuery-UI Slide div right onClick

Question

I have an input search field and a div, in that div is a table that I can search through with the input search field;

$(document).on("click", '#zoekenbtn', function (event) {
    $("#zoekenpanel").toggle('slide', { direction: 'left' });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="&#128270"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
    <table class="zoektable">
        <tr id="myhead">
            <th>
                Klant
            </th>
            <th>
                Locatie
            </th>
            <th>
                Plaats
            </th>
        </tr>
        @foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
        {
            <tr name="sysinfo" itemscope itemid="@temp.Id" class="info" data-url="@Url.Action("searchresult", "Klanten", new { id = temp.Id})">
                <td>
                    @temp.Klant
                </td>
                <td>
                    @temp.Locatie
                </td>
                <td>
                    @temp.Plaats
                </td>
            </tr>
        }
    </table>
</div>

<input id="zoekenbtn" type="search" placeholder="&#128270"/>

but this causes a problem; if you click on the input and click somewhere else. you're no longer focussed on the input, thus you can't type in it anymore. so you have to click it again to be able to type. which toggles the div again and closes it.

I need a way so that it doesn't toggle, but slides open from left to right.

Thank you :)

Answer 1

I found what I wanted, I succeeded by adding

$(document).on("click", '#zoekenbtn', function (event) {
    if ($('#zoekenpanel').is(":hidden")) {
        $("#zoekenpanel").toggle('slide', { direction: 'left' });
    }
});

This way the slideToggle won't toggle while the panel is open :)

Answer 2

add

$(document).keypress(function() {
   $("#zoekenbtn").focus(); 
});

it would capture the keystroke and focus in you input field

$(document).on("click", '#zoekenbtn', function (event) {
    $("#zoekenpanel").toggle('slide', { direction: 'left' });
  
});
$(document).keypress(function() {
   $("#zoekenbtn").focus(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="&#128270"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
    <table class="zoektable">
        <tr id="myhead">
            <th>
                Klant
            </th>
            <th>
                Locatie
            </th>
            <th>
                Plaats
            </th>
        </tr>
        @foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
        {
            <tr name="sysinfo" itemscope itemid="@temp.Id" class="info" data-url="@Url.Action("searchresult", "Klanten", new { id = temp.Id})">
                <td>
                    @temp.Klant
                </td>
                <td>
                    @temp.Locatie
                </td>
                <td>
                    @temp.Plaats
                </td>
            </tr>
        }
    </table>
</div>