如何在按下搜索图标后扩展搜索栏

<div>
  <i class="fa fa-search" id="search-icon"></i>
  <input type="text" id="search-bar" style="display: none;">
</div>

#search-icon {
  cursor: pointer;
}

#search-bar {
  display: none;
  width: 200px;
  padding: 5px;
}

var searchIcon = document.getElementById('search-icon');
var searchBar = document.getElementById('search-bar');

searchIcon.addEventListener('click', function() {
  if (searchBar.style.display === 'none') {
    searchBar.style.display = 'block';
    searchBar.focus();
  } else {
    searchBar.style.display = 'none';
  }
});