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

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

<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 - вариант не ахти. Поэтому вопрос пока открыт.

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

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

Где в этом коде -
задание ширины в пикселах?

Какая уже разница. Это те же яйца с использованием UI что я нарыл и выложил выше, только сбоку. Вот без UI бы...

Lutsk,
можно не display: none задавать, а просто изначально уводить свойствами right или margin-right этот блок за пределы окна, а по кнопке анимировать выезд/заезд. Такой прием часто используют.

Действительно выезжает. Только как при повторном клике на a.search-toggle вернуть блоку #searchCollapse обратно left:100%?

$('.search-toggle').click(function(){
	$('#searchCollapse').animate({left: '0%'});
	$(this).toggleClass("active");
});

Lutsk,
очень просто, делайте проверку на класс active. Как-то так (схематично)

if($(this).hasClass('active')) {
задвигаем элемент
} else {
выдвигаем
}

Ок, в итоге вышло:

$('.search-toggle').click(function(){
	if($(this).hasClass('active')) {
		$('#searchCollapse').animate({left: '100%'}, 700);
		$(this).removeClass("active");
	} else {
		$('#searchCollapse').animate({left: '0%'}, 700);
		$(this).toggleClass("active");
	}
});

vettel, спасибо за подсказки!