<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
div.opndli {
background-color: #000;
border-left: medium none currentColor;
border-radius: 5px;
display: none;
float: left;
font-weight: 400;
height: 180px;
right: 0px;
margin: 0px;
padding: 0px 5px;
position: absolute;
text-transform: capitalize;
// top: 22px;
width: 360px;
z-index: 99;
}
</style>
</head>
<body>
<span class="opnd">Войти через...</span>
<div class="opndli" style="display: none;">
тут содержимое
</div>
</body>
<script>
jQuery(function(){
jQuery("span.opnd").click(function () {
jQuery(".opndli").slideToggle("slow");
});
});
</script>
</html>
В документации метода "toggle" ясно написано что он использует методы 'show' и 'hide' jQuery. Если посмотреть примеры работ этих методов на оф. сайте, то можно увидеть тот эффект, о котором вы говорите.
Если вы хотите чтобы изображение выезжало сверху вниз используйте 'slideToggle' или напишите свою анимацию, какую вам угодно с помощью 'animate'.