Matt Matt - 5 months ago 14
CSS Question

Changing height of <p> block to a fixed height equal to that of auto

I am trying to make a show more / show less button which changes the height of a

<p>
block and slides to the correct size.

I know this can be done, and can only be done, between two fixed heights and the use of
auto
will stop the animation.

My question:

How can I get the
px
value of the auto height for the
<p>
block before the animation starts so that the height can be set to this
<p>
block explicitly for the animation to occur.

So far I am using:

function popupShow(id) {

var curCss = $('#results').find('a#'+id).parent().find('p').css("height");
var parent = $('#results').find('a#'+id).parent();

if(curCss == "136px") {
parent.find('p').css("height", "auto");
parent.find('a.show').html("...Show Less");
}
else {
parent.find('p').css("height", "136px");
parent.find('a.show').html("...Show More");
}

}


which works great how amending the size of the
<p>
to include the full text however I want to add in some animation. Following some googling I changed this too

function popupShow(id) {
var curCss = $('#results').find('a#'+id).parent().find('p').css("max-height");
var parent = $('#results').find('a#'+id).parent();

if(curCss == "136px") {
parent.find('p').css("max-height", "500px");
parent.find('a.show').html("...Show Less");
}
else {
parent.find('p').css("max-height", "136px");
parent.find('a.show').html("...Show More");
}
}


However I have noticed some blog posts can be bigger than
500px
so I set it to
5000px
as it said anything bigger than what you actually need but then the animation looks stupid.

For the css animation I am using:

-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;


html layout for 1 blog post (ignore php):

<div class="post-hold">
<div class="p-head">
<div class="p-title">
' . $posts[$i]['title'] . '
</div>
</div>
<div class="p-body">
<p>' . $posts[$i]['description'] . '</p>
<a id="' . $posts[$i]['id'] . '" class="show" onClick="popupShow(this.id)">...show more</a>
<div style="display: block; clear: both;"></div>
</div>
<div class="p-foot">
<div class="info">
<span class="p-time">' . \Core\View::time_since($posts[$i]['timeStamp']) . '</span>
<span class="p-user">' . $posts[$i]['user'] . '</span>
</div>
<div style="display: block; clear: both;"></div>
</div>
</div>


Thanks in advance.

EDIT

JSFiddle for the 136px -> 500px example.

Answer

you could use line-height (no need to know height):

p {
  margin:0;
  overflow:hidden;
  line-height:0em;
  transition:0.25s
}
a:hover + p , 
p:hover /* don't loose p once you want to hover it/select text or click an inside link */
{
  line-height:1.2em;
}
<a href="#">link</a>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<a href="#">link</a>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<a href="#">link</a>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>