Растягивающийся div

[lersen]

Добрый день, форурчане!

 

Нужен немного необычный спойлер.

 

Нужно сделать div, который будет иметь высоту картинки, которая резиновая, а при нажатии на него(div) или лучше внизу на кнопку, растягивался по высоте на размер всего содержимого этого div.

[3d_max_9]

http://cssdeck.com/labs/2dutta9i

[lersen]

Спасибо огромное! Есть пару нюансов, но в целом - это решение!

[lersen]

http://cssdeck.com/labs/2dutta9i

Всё классно. Но при использовании Jquery старше 1.8 выдает баги с отображением внешнего div'а. Помогите разобраться!

[3d_max_9]

попробуйте такой код

$(document).ready(function(){    var heightSlider = $('#slider').height(),      heightImg = $('img').height(),      flag = 0;    $('#slider').height(heightImg);    $( "span" ).click(function() {    if(flag == 0){        $('#slider').animate({'height':heightSlider},300);        $(this).text('Up');        flag = 1;        }    else{      $('#slider').animate({'height':heightImg},300);        $(this).text('Down');        flag = 0;    } });  });

Edited December 18, 2013 by 3d_max_9

[lersen]

 

попробуйте такой код

.................

Проблему решил другим способом.

 

Но возник новый трабл! При первой загрузке(или через ctrl+f5) не успевает подтянуть картинку и делает высоту дива = 0.

Есть подозрение, что $(document).ready(function() работает не верно. Наблюдается в основном на chrome.