Expandable Div - Stackoverflow Question

HTML

<div id="title1">Title 1<p id="details">Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition.</p></div>
<div id="title2">Title 2<p id="details">Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size...</p></div>
<div id="title3">Title 3<p id="details">Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. </p></div>
<div id="title4">Title 4<p id="details">Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... </p></div>

CSS

#title1 {
  height: 1em;
  overflow: hidden;
   -webkit-transition: height 1s; /* Transitions not working */
  transition: height 1s;
}
#title1:hover {
  height: auto;
}
#title2 {
  height: 1em;
  overflow: hidden;
   -webkit-transition: height 1s; /* Transitions not working */
  transition: height 1s;
}
#title2:hover {
  height: 150px;
}
#title3 {
  max-height: 1em;
  overflow: hidden;
   -webkit-transition: max-height 3s; /* Transitions not working */
  transition: max-height 3s;
}
#title3:hover {
  max-height: 50%;
}
#title4 {
  height: 1em;
  overflow: hidden;
}

JavaScript

$("#title4").mouseenter(function() {
	$("#title4").css({"height":"auto"});
	height = $("#title4").height();
	$("#title4").css({"height":"1em"});
	$("#title4").animate({height:height},500,"swing");
})
	
$("#title4").mouseleave(function() {
	$("#title4").animate({height:"1em"},500,"swing");
})