jquery SlideToggle effect in upward direction?

I need to make a jquery slidetoggle effect in upward direction., now the slide toggle is working only in downward direction. When i used slide up method i couldn’t use same button to slide up and slide down the div.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11/jquery.min.js">              </script>
<script> 
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideToggle("slow");



 });
});
</script>

<style> 
#panel,#flip
{

padding:5px;
text-align:center;
height:92px;
width:261px;
opacity:0.8;
background-color:#b3171d;

}

 #panel
{
padding:50px;
background:url(maharani%20html/images/prince.jpg) no-repeat;
width:262px;
height:248px;

}
</style>
</head>
<body>

<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>

 </body>
</html>

I am a beginner in jquery., please help me 🙂

Leave a Comment