jQuery toggle direction
Please, improve it without css
To run this program you should connect your net.
<html>
<head>
<title>Jquery toggle direction</title>
<script src="http://code.jquery.com/jquery-latest.js"</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".toggle").hover(function(){
jQuery(".bottom_left,.bottom_right,.top_left,.top_right").toggle(1000);
});
});
</script>
<style>
.bottom_left {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
display:none;
padding:10px;
position:absolute;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
bottom:385px;
right:625px;
}
.bottom_right {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
display:none;
padding:10px;
position:absolute;
text-align:center;
width:320px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
bottom:385px;
left:500px;
}
.top_left {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
display:none;
padding:10px;
position:absolute;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
top:240px;
right:625px;
}
.top_right {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
display:none;
padding:10px;
position:absolute;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
top:240px;
left:500px;
}
.toggle
{
position:absolute;
z-index:2;
cursor:pointer;
left:400px;
top:170px;
text-decoration:underline;
}
.mishu
{
position:absolute;
font-size:20px;
top:350px;
left:250px;
}
</style>
</head>
<body>
<div class="toggle"> <h1>Toggle</h1></div>
<div class="mishu">Become fan on my facebook account <a href="http://en-gb.facebook.com/people/Mishu-Asaquzzaman/100000130253126" target="_blank">joy.mishu@gmail.com</a></div>
<div class="bottom_left">Bottom to left toggle</div>
<div class="bottom_right">Bottom to right toggle</div>
<div class="top_left">Top to left toggle</div>
<div class="top_right">Top to right toggle</div>
</body>
</html>
View Demo