textbox effect

onclick textbox show div

If you are interested to display the block or menu when your click on textbox or any link. Here you could show the div onclick event with the help of javascript and CSS. If you want to show multiple then change the ID i.e div1,div2, div3 so on.



Javascript

<script type=”text/javascript”>
function showhide(divid){
thediv = document.getElementById(divid);
if(thediv.style.display== ‘none’ ){
thediv.style.display=’block’
}else{
thediv.style.display=’none’
}
}
</script>

CSS

<style>
.dropdown
{
width:200px;
border:2px solid #737f8e;
position:absolute;
background:#c2c9d1;

}

.dropdown ul
{
margin:0px;
padding:0px;
}
.dropdown ul li
{
list-style:none;
}
.dropdown ul li a
{
text-decoration:none;
color:#4b4e55;
padding-left:5px;
display:block;
height:21px;
font-weight:bold;
}
</style>

HTML

<input type=”textarea” onClick=”showhide(‘div1′)” >
<div id=’div1’ class=”dropdown” style=”display:none;”>
<ul>
<li><a href=”#”>Razer Maharjan</a></li>
<li><a href=”#”>Tom Clark</a></li>
<li><a href=”#”>Lincol Prelandon</a></li>
</ul>
</div>

Advertisements