Как сделать так что бы поле ввода и кнопка закрыть были изначально скрыты, а при клике показывались, сейчас форма при клике просто отправляет на страницу результатов поиска
<form role="search" method="get" id="search-form" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div id="search-hidden">
<div class="close-search"></div>
<input type="text" value="<?php echo get_search_query(); ?>" id="search-text" autofocus />
</div>
<button type="submit" id="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>">
<svg viewBox="0 0 20 20" width="20px" height="20px"><path d="M6 12h2v2l-6 6-2-2Z"/><path d="M6 7a7 7 0 1 1 7 7 7 7 0 0 1-7-7Zm2 0a5 5 0 0 0 10 0A5 5 0 0 0 8 7Z"/><path d="m6.9 13.88-.71-.71 2.48-2.48.71.71Z"/></svg>
</button>
</form>
form#search-form {
position: absolute;
display: flex;
height: 40px;
z-index: 1;
background-color: #f0f5eb;
}
#search-hidden {
display: none;
width: 100%;
}
.close-search {
position: relative;
width: 25px;
}
.close-search:before,
.close-search:after {
content: '';
position: absolute;
top: 5px;
left: 0;
height: 2px;
width: 25px;
-webkit-transform: translateY(10px) rotate(-225deg);
-ms-transform: translateY(10px) rotate(-225deg);
transform: translateY(10px) rotate(-225deg);
background-color: #000;
}
.close-search:after {
top: 25px;
-webkit-transform: translateY(-10px) rotate(45deg);
-ms-transform: translateY(-10px) rotate(45deg);
transform: translateY(-10px) rotate(45deg);
}
input#search-text {
padding: 0 15px;
border: none;
outline: none;
background-color: transparent;
}
button#search-submit {
border: none;
background: transparent;
}
jQuery("#search-submit").on('click', function() {
jQuery("#search-form").toggleClass("show")
});
