Toggle Button to change text, icon and show search bar

Question

I do have a header with a navigation bar. The navigation includes a search button that each time is clicked should change the word from "Search" to "Close Search" and open the search bar initially not displayed below the navigation bar. I tried different ways with .html, .text but the text in the search button sometimes does work and others doesn't. I tried different approaches, but it is not consistent. Every time I click on the "Search" button, it should change the text and open and close the search bar, not just once. I tried using toggle() as well. I paste here below the code for button and search bar.

Also, the search button should display a search icon, defined by the class "btn-search-icon", which disappears once the searchbar closes and the button has the text "close search". The search bar below has a "search" field, submit button and a cancel button. The cancel button should remove the value in the search field. This step works but it reloads the page and as a consequence it closes the search bar, while it should stay open.

Any ideas? I appreciate any help.

HTML:

   <button class="bg-btn btn-search btn-search-icon" id="searchBtnBar" type="submit" value="true">Search</button>
    div class="container search-bar-container">
    <form id="bgSearchBar">
       <input type="search" name="searchfield" value="Search" class="searchField">
       <button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button>
       <button class="bgcancelhbtn"></button>
    </form>
    </div>

JQuery:

$('#bgSearchBar').hide();
$("#searchBtnBar").click(function () {
   $(this).fadeOut(function () {
       $(this).text(($(this).text() == 'Search') ? 'Close Search' : 'Search').fadeIn();
   })
 
   $(this).toggleClass('btn-search-icon');
   $('#bgSearchBar').fadeIn();
})

$(".bgcancelhbtn").on("click", function(event) {
  $(".searchField").val("");
});

Answer 1

I tried to make minimal changes so it would work.

$('#bgSearchBar').hide();

$("#searchBtnBar").click(function() {
  var flag = ($(this).text() == 'Search');
  $(this).fadeOut(function() {
    $(this).text(flag ? 'Close Search' : 'Search').fadeIn();
  })

  $(this).toggleClass('btn-search-icon');
  if (flag) {
    $('#bgSearchBar').fadeIn();
  } else {
    $('#bgSearchBar').fadeOut();
  }
})

$(".bgcancelhbtn").on("click", function(event) {
  $(".searchField").val("");
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<button class="bg-btn btn-search btn-search-icon" id="searchBtnBar">Search</button>
<div class="container search-bar-container">
  <form id="bgSearchBar">
    <input type="search" name="searchfield" value="Search" class="searchField">
    <button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button>
    <button class="bgcancelhbtn" onclick="this.closest('form').reset(); return false">Cancel</button>
  </form>
</div>