score:2

Accepted answer

use react usestate hook and let react handle the manipulation of the dom.

const [shouldshowsearch, setshouldshowsearch] = usestate(false);
const toggleshowsearch = () => setshouldshowsearch(prev => !prev);
const label = shouldshowsearch ? 'hide' : 'show';
const top = shouldshowsearch ? '70px' : '0';
//... code
<>
<form id="hearder_search_bar" action="#" classname="header__search" style={{top}}>
// ... code
<button 
          type="button" 
          classname={label}
          onclick={toggleshowsearch}
        >
</form>
// .. code
<button onclick={toggleshowsearch}>{label} search</button>

score:0

you can use conditionnal classname

classname={headerishidden ? 'header__search__hidden' : 'header__search__shown'  

Related Query

More Query from same tag