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

[Lutsk]

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

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

css:

.wraper{
    position: relative;
}
#searchCollapse {
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
}

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

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

[dyhmzall]

так гуглите сначала)
slideToggle, слева направа, справа налево

[Lutsk]

так гуглите сначала)
slideToggle, слева направа, справа налево

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

[Lutsk]

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

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

[vettel]

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

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

[dyhmzall]

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

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

[Lutsk]

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

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

[Lutsk]

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

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

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

[vettel]

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

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

[Lutsk]

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

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