выезжающий блок
 

Уважаемые знатоки, как сделать чтобы блок появлялся не сверху вниз, а справа налево?
Вот код, который сейчас:

<div class="wraper">
<a class="search-toggle" href="#">Клик</a>
<div id="searchCollapse">Содержимое</div>
</div>

css:

$(document).ready(function(){
    $(".search-toggle").click(function(){
        $("#searchCollapse").slideToggle("slow");
        $(this).toggleClass("active");
		return false;
    });
});

Прошу заметить, что появляющийся блок занимает по высоте всё пространство родительского .wraper и ширину 80%. Если это важно для скрипта...

так гуглите сначала)
http://javascript.ru/forum/jquery/33...va-nalevo.html

Да гуглю пол дня уже. Только все эти примеры открывают блок со строго заданной шириной в пикселах. А у меня в процентах. Адаптика потому что.

вот наподобие что мне нужно, но открывает слева направо. Можно как-то инвертировать этот код справа налево?

$('.search-toggle').click(function(){
	 $('#searchCollapse').animate({width: 'toggle'});
});

А что мешает сначала вычислить ширину элемента в JS (она все равно будет в пикселах), и потом уже двигать?

$('.search-toggle').click(function(){
     $('#searchCollapse').animate({width: 'toggle'});
});

Как вариант: может сделать внутренни блок float: right. Тогда анимация увеличения размера будет влево. ну или сделать внешнему блоку text-aligh:right...

Не вариант. Адаптика, сэр.

нашел решение с использованием jQuery UI:

$(".search-toggle").click(function () {
	var effect = 'slide';
	var options = { direction: 'right' };
	var duration = 700;
	$('#searchCollapse').toggle(effect, options, duration);
});

Но вот ради одного блока юзать UI - вариант не ахти. Поэтому вопрос пока открыт.

Да причем здесь адаптика?
На момент клика берется блок и определяется его реальная ширина в пикселах на данный момент.
Хотя я не понимаю, причем здесь ширина блока. В коде, который кидали выше, не используется ширина вообще, чем он плох?

Тем, что при уменьшении окна меняется ширина блока. Если задать в пикселах выезжающий - поламает верстку.