Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Textfeld öffnen bei klick auf Element

Textfeld öffnen bei klick auf Element

Hallo, Ich bin noch relativ neu bei JS und versuche gerade beim klick auf ein Element, ein Textfeld zu öffnen - um dann in dieses etwas reinzuschreiben. Kann mir da vielleicht jemand mit der Funktion helfen? Das Element:
       
SUCHE
Die Funktion showSearch() hab ich noch nicht ausprogrammiert - dabei bräuchte ich Hilfe.

Der hier verwendete Code

<link rel="stylesheet" href="/css_webseite/all.min.css"> <style> *{ margin:0; padding:0; } i{ font-size:25px } header{ display:flex; flex-direction:column; } .line{ padding:3px 20px; background:grey; } nav{ width:100vw; background:grey; } nav ul{ display:flex; list-style:none; } li{ flex:1; border:1px solid black; } li a{ text-align:center; text-decoration:none; display:block; padding:3px; color:white; } .unsichtbar{ max-height:0px; } .sichtbar{ padding:6px 20px; max-height:35px; transition:max-height 500ms; } #searchbox{ transition:max-height 500ms; background:grey; overflow:hidden; } #searchbox input{ width:70%; padding-left:20px; font-size:22px; height:30px; background:lightgrey; border:2px solid lightgrey; border-radius:5px; outline:none; } #searchbox input:focus{ border:2px solid green; } #searchbox button{ width:20%; height:34px; font-size:22px; border-radius:5px; } </style> <header> <div class="line"> <i id="suche" class="fa fa-search"></i> </div> <nav> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Videos</a></li> <li><a href="#">About</a></li> <li><a href="#">Snippets</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="unsichtbar" id="searchbox"> <input placeholder="Search Text" type="text"> <button>Search</button> </div> </header> <script> document.getElementById('suche').addEventListener('click',function(){ document.getElementById('searchbox').classList.toggle('sichtbar'); }) </script>