SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery: view more/ view less text

    Hi,
    How can i do a text extract like this,

    http://www.apple.com/trailers/universal/despicableme/

    where u can click to view more text and then click view less when u like to...

    thanks,
    Lau

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this:
    Code:
    <p class="whatever">
    first part of text
     <span style="display: none;"> second part of text </span>
    </p>
    <a href="javascript:void(0);" onclick="var block = $('p.whatever span'); $(this).html((block.is(':visible')) ? 'View more' : 'View less'); block.slideToggle(); return false;">View more</a>

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have made it thanks,

    http://lauthiamkok.net/tmp/jquery/jq...ore_less_text/

    but maybe some code master can write this better than me. here is the entire code,

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    <script type = "text/javascript">
    $(document).ready(function(){
    	var text = $('#content').html();
    	var extract = text.substring(0,300) + "...";
    	$('#content').html(extract);
    	$('#button').html('<a href="#" class="more">Show More</a>');
    	more(text);					
    });	
    
    this.more = function(text){	
    $('.more').click(function () {
    		$('#content').html(text);
    		$('#content').append('<div class="position"></div>');
    		position();
    		$('#button').html('<a href="#" class="less">Show Less</a>');
    		return false;
    	});
    }
    
    this.position = function(){	
    	var p = $(".position");
    	var position = p.position();
    	var pos_top = position.top;
    	$('#content').animate({height:pos_top+'px'}, function(){
    		less();
    	});	
    }
    
    this.less = function(){	
    $('.less').click(function () {
    	$('#content').animate({height:'100px'}, function(){
    		var text = $('#content').html();
    		var extract = text.substring(0,300) + "...";
    		$('#content').html(extract);
    		$('#button').html('<a href="#" class="more">Show More</a>');
    		more(text);
    		});	
    		return false;
    	});
    }
    </script>
    <style>
    
    div {
    	clear:both;
    	}
    	
    p {
    	margin:0px 0px 20px 0px;
    	clear:both;
    	}
    	
    #content{ 
    	height:100px; 
    	width:400px; 
    	overflow:hidden; 
    	border: 1px solid #0000FF;
    	}
    	
    .less{
    	color:#FF0000;
    	}
    	
    .more{ 
    	font-weight:bold;
    	}
    	
    
    </style>
    
    </head>
    <body>
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit erat sed enim convallis tincidunt. Vivamus vestibulum hendrerit blandit. Donec sagittis magna justo. Sed vehicula auctor mauris quis dictum. Aliquam erat volutpat. Phasellus at quam nibh, sed dictum neque. Maecenas lectus arcu, sagittis quis dapibus sed, lobortis id velit. Vestibulum ut tortor neque. </p>
    
    <p>Phasellus accumsan aliquam quam, vitae fermentum purus pellentesque quis. Aliquam viverra lacus at tortor scelerisque vestibulum eget vitae orci. Etiam volutpat neque non erat facilisis egestas. Duis vulputate lacus eget nulla mattis vulputate. Fusce vehicula libero dolor, vitae tempor nulla. Vestibulum ut tortor neque. Quisque porttitor ornare massa sit amet ornare.</p>
    </div>
    
    <div id="button"></div>
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •