Show & Hide text
// show / hide text (use when you only want to show/hide a specific number of lines within
// truncate text
$('.truncate-text').each(function() {
var lineNumber = $(this).next('.truncate-link').data('line-height');
var lineHeight = $(this).css('line-height').replace("px","");
var truncatedHeight = lineHeight*lineNumber;
$(this).css({'height': truncatedHeight});
if (truncatedHeight >= $(this)[0].scrollHeight) {
$(this).next('.truncate-link').hide();
// or to retain height: $(this).next('.truncate-link').css('visibility', 'hidden');
}
});
// show / hide truncated text
$('.truncate-link').click(function() {
var moreTxt = $(this).data('more');
var moreHeight = $(this).prev('.truncate-text')[0].scrollHeight;
var lessTxt = $(this).data('less');
var lineNumber = $(this).data('line-height');
var lineHeight = $(this).prev('.truncate-text').css('line-height').replace("px","");
if ($(this).hasClass('show')) {
$(this).html(lessTxt);
$(this).removeClass('show');
$(this).prev('.truncate-text').animate({'height': moreHeight});
} else {
$(this).html(moreTxt);
$(this).addClass('show');
$(this).prev('.truncate-text').animate({'height': lineHeight*lineNumber});
}
});
<div class="truncate-text">This is the text to truncate.</div>
<div class="truncate-link show" data-more="Read More" data-less="Read Less" data-line-height="6">Read More</div>
.truncate-text {
font-size: $f-size !important;
line-height: $f-line-height !important;
p, div {
font-size: $f-size !important;
line-height: $f-line-height !important;
padding: 0 0 $f-line-height 0 !important;
margin: 0 !important;
}
overflow: hidden;
}
.truncate-link {
padding-top: 20px;
text-align: right;
color: $c-link;
cursor: pointer;
}
// when you are show/hiding an entire div
<div id="leftnav">
<ul class="level1">
<li class="level1">
<a href="xxx.html">Top Level 1</a>
<ul class="level2">
<li class="level2"><a href="xxx.html">Sub Level 1a</a></li>
<li class="level2"><a href="xxx.html">Sub Level 1b</a></li>
<li class="level2"><a href="xxx.html">Sub Level 1c</a></li>
</ul>
</li>
<li class="level1">
<a href="xxx.html">Top Level 2</a>
<ul class="level2">
<li class="level2"><a href="xxx.html">Sub Level 2a</a></li>
<li class="level2"><a href="xxx.html">Sub Level 2b</a></li>
<li class="level2"><a href="xxx.html">Sub Level 2c</a></li>
</ul>
</li>
<li class="level1">
<a href="xxx.html">Top Level 3 (no children)</a>
</li>
</ul>
</div>
//another example
$('.bio-link').click(function(event) {
event.stopPropagation();
$('.bio').not($(this).next('.bio')).slideUp();
if ($(this).next('.bio').length) {
$(this).next('.bio').slideToggle( 'slow', function() {});
return false;
}
});
<div class="bio-link">View Bio</div>
<div class="bio">Show This</div>