# JS: Show Hide Div

**URL:** <https://forum.kirupa.com/t/js-show-hide-div/323785>\
**Category:** web dev\
**Created:** [July 18, 2011, 12:58pm UTC](https://forum.kirupa.com/t/js-show-hide-div/323785 "2011-07-18T12:58:14Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![gajulasidhu](https://avatars.discourse-cdn.com/v4/letter/g/b77776/32.png) [@gajulasidhu](https://forum.kirupa.com/u/gajulasidhu)\
**Post date:** [July 18, 2011, 12:58pm UTC](https://forum.kirupa.com/t/js-show-hide-div/323785/1 "2011-07-18T12:58:14Z")

</div>

I am trying to show and hide div.

when user click login .login-divneed show.

when user mouseout or click outside of the login div. .login-divneed to hide

here is my code

\<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)”\>  
\<html xmlns=“[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)”\>  
\<head\>  
\<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /\>  
\<title\>Untitled Document\</title\>  
\<script type=“text/javascript”\>

function showdiv(){

document.getElementById(‘logindiv’).style.visibility = “visible”

}  
function hidediv(){  
document.getElementById(‘logindiv’).style.visibility = “hidden”

}  
\</script\>  
\<style type=“text/css”\>  
body {  
margin-left: 0px;  
margin-top: 0px;  
margin-right: 0px;  
margin-bottom: 0px; font-family:Arial, Helvetica, sans-serif;  
}

#header{ height:100px; width:900px; background:#f2f2f2; margin:0 auto;}  
.login{ float:right; padding:40px 40px 0 0; display:block; position:relative; }  
.login a{ display:block; padding:5px 15px; position:relative; background:#fff; z-index:999;

}  
.login a:hover{ display:block; padding:5px 15px; position:relative; background:#fff; z-index:999;

border: solid #000;  
border-width: 1px 1px 0px 1px;

}  
.login-div{ margin-top:-1px; background:#fff; width:250px; border:1px solid #000; padding:15px; height:200px; position:absolute; top:100%; left:-210px; visibility:hidden;  
}  
\</style\>  
\</head\>

\<body\>  
\<div id=“header”\>  
\<div class=“login”\>  
\<a href="#" onclick=“showdiv();”\>Login\</a\>  
\<div class=“login-div” id=“logindiv”\>sfs\</div\>  
\</div\>

\</div\>  
\</body\>  
\</html\>
