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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!