Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-27-2012, 04:52 PM   PM User | #1
aaronhockey_09
Regular Coder

 
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 Posts
aaronhockey_09 is an unknown quantity at this point
jQuery - View More button Help -

Hey guys, so im working on a site, and i have this "view more" Button on each comment.

So i found one online, but i need to make 1 change.
Right now the "view more" button shows up on every comment no matter what.
What i need is to have it show up only if the height of the div .more-less .more-block p has a height of say, 40px or more.

Here is what i have for my jquery right now, and html

jquery
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

// The height of the content block when it's not expanded
var adjustheight = 30;
// The "more" link text
var moreText = "+  More";
// The "less" link text
var lessText = "- Less";

// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block p").css('height', adjustheight).css('overflow', 'hidden');

// The section added to the bottom of the "more-less" div
$(".more-less").append('<a href="#" class="adjust"></a>');

$("a.adjust").text(moreText);

$(".adjust").toggle(function() {
		$(this).parents("div:first").find(".more-block p").css('height', 'auto').css('overflow', 'visible');
		// Hide the [...] when expanded
		$(this).parents("div:first").find("p.continued").css('display', 'none');
		$(this).text(lessText);
	}, function() {
		$(this).parents("div:first").find(".more-block p").css('height', adjustheight).css('overflow', 'hidden');
		$(this).parents("div:first").find("p.continued").css('display', 'none');
		$(this).text(moreText);
});
});

</script>
HTML

Code:
<div class="comment_message">
            	<div class="more-less">
    
    	<div class="more-block">
        				<p>This is where a comment would go. </p>
</div></div></div>
Any help is greatly appreciated.
Thanks
aaronhockey_09 is offline   Reply With Quote
Reply

Bookmarks

Tags
40px, button, height, java script, jquery

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:14 PM.


Advertisement
Log in to turn off these ads.