Jquery переключатель с положением абсолютного дна

Question

У меня есть позиционированный контейнер absolute, который выровнен bottom.

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

html

<div id="outer">
    <div class="expandableContent">
        <p class="toggler">Toggle</p>
        <div>
            <p>Some content here</p>
            <p>Some content there</p>
            <p>Some content everywhere</p>
        </div>
    </div>
</div>

css

#outer {
     height: 300px;
     position: relative;
}

.expandableContent {
    position: absolute;
    bottom: 10px;
}

 .expandableContent > div {
     display: none;
 }

jquery

$(document).ready(function () {
    $('.toggler').click( function() {
        $(this).next().toggle(1000);
    });
});

Вот ссылка: http://jsfiddle.net/SunnyRed/A8pNv/1/

Answer 1

Вам не нужно устанавливать высоту ... только ширину расширяемого div. Я изменил это для вас в вашем jsfiddle.

Единственное, что я сделал, было:

 .expandableContent {
    position: absolute;
    bottom: 10px;
    width:200px;
}

Answer 2

Взгляните на это, теперь это очень элегантно.

Рабочая демо

Answer 3

width: 100%;
white-space:nowrap;

Добавьте выше div, содержащий текст.
xGreen правильно, что настройка ширины будет работать, но некоторые браузеры также требуют отключения переноса текста. Примером может служить Chrome, просто задать ширину недостаточно.