i have a searchbox in my website, when the user enters my website, he will see a search icon, when the search icon is clicked, the searchbox is expanded. the code is like below:

```js
$(document).ready(function() {

  $('#searchbar-icon').click(function() {
    $('#search_header').animate({
      width: 'toggle'
    });
    $("#searchbar-icon").toggle();
    $("#searchbar-cross").toggle(100);
  });

  $('#searchbar-cross').click(function() {
    $('#search_header').animate({
      width: 'toggle'
    });
    $("#searchbar-cross").toggle();
    $("#searchbar-icon").toggle(100);
  });

});
```

```html
<li class="header-icons-list spl-cart searchbar">

  <form action="<?php echo  base_url('searchProducts'); ?>" method="post">
    <input type="text" name="search_item" class="search-header" id="search_header" placeholder="Search here">
  </form>
  <i class="fa fa-search" id="searchbar-icon" aria-hidden="true"></i>

  <i class="fa fa-times" id="searchbar-cross" aria-hidden="true"></i>

</li>
```

here is the link to my website: [enter link description here](https://www.booktheparty.in/)
everything is working fine, but there is a small problem, when the user clicks search icon and when the search box is expanded, the cursor is not appearing for the user to start searching, user has to again click on the searchbox to start typing, i want the cursor to appear as soon as the searchbox is expanded, can anyone please tell me how to achieve this. thanks in advance.