Cacher is the code snippet organizer for pro developers

// 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>