Smarty Slider

header info one
something into the content
header info two
something into the content
header info one
something into the content like
two lines
header info one
something into the content something smarty
and linebreaked and even

with unpredicable height


Source: http://codepen.io/dmi3y/pen/lqokb
Code:
header info one
something into the content
header info two
something into the content
header info one
something into the content like
two lines
header info one
something into the content something smarty
and linebreaked and even

with unpredicable height

Javascript:
jQuery(function($){$('.verticalSlider').each(function(){var expanded=$('.sliderExpanded',this),height,verticalSlider=this,sliderPhantome=$('
').addClass('verticalSliderContent sliderPhantome').appendTo(verticalSlider),gimeDataHeight=function(el){var height=sliderPhantome.html(el.html()).find('div').outerHeight(true);el.attr('data-height',height);return height};expanded.attr('data-height',expanded.height());$('.verticalSliderHeader',this).click(function(){if($(this).next().hasClass('sliderExpanded'))return;expanded.animate({height:0}).removeClass('sliderExpanded');expanded=$(this).next();height=expanded.attr('data-height')||gimeDataHeight(expanded);expanded.animate({height:height}).addClass('sliderExpanded')})})});
CSS:
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);.verticalSlider{margin:0 auto;width:300px;text-align:center}.verticalSliderHeader{color:#fff;font-size:27px;font-variant:small-caps;font-family:'Droid Serif',serif;text-transform:capitalize;text-shadow:1px 1px 1px #e6c479;background:#a77c1f;padding:15px 10px;min-height:35px;width:300px;cursor:pointer}.verticalSliderContent{background:#ECE5E5;border-bottom:2px solid #fff;height:0;width:320px;overflow:hidden}.verticalSliderContent.sliderExpanded{height:100%}.verticalSliderContent.sliderPhantome{position:absolute;visibility:hidden;top:0;left:0;z-index:-1000}.verticalSliderContent div{padding:30px 5px;font-size:12px;font-weight:600}