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:
Die Funktion showSearch() hab ich noch nicht ausprogrammiert - dabei bräuchte ich Hilfe.
SUCHE
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>