Expandable Post Code

jonnygrim · November 11, 2009

Hi,

Hope you can help. Which currently I haven't upgraded to connect to a mysql server, so its all just plain html and php coding. I have a page that displays short news articles of about 25 30 words then expands into 50 words. Ive tried a few scripts and code changes but none of them seem to work. Ideally what im looking at is having the first few words with a read more link that expands to the rest. Any help would be appreciated.

Thanks

isedeasy · November 11, 2009

If I was doing this then I would use jquery to count out 30 words then hide the rest.

You could do this by adding a span around the words and hiding them with CSS, then all you need todo is append a link that reveals the whole text when clicked.

isedeasy · November 11, 2009

Here is something I quickly wrote in Jquery (only tested in FF)

I used characters instead of words and there is a var at the top to change the amount you want to show.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
    
    <head>
  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

	<script type="text/javascript">

	$(document).ready(function() {

		var char_length = 200;

		$('.read_more').each(function() {

			var visable_part = $(this).html().substring(0, char_length);
			var hidden_part = $(this).html().substring(char_length, $(this).html().length);

			$(this).html(visable_part + '...<span class="hidden">' + hidden_part + '</span>').append('<a href="#" class="read_more_link">Read More</a>');

			$('.read_more_link').click(function() {

				$(this).hide().parent().find('.hidden').removeClass('hidden');

			});

		});

	});

	</script>

	<style type="text/css">

		h2 {
			text-align:center;
		}

		div {
			width:800px;
			margin:10px auto;
		}

		.hidden {
			display:none;				
		}

		.read_more_link {
			display:block
		}

	</style>
        
    </head>

    <body>

	<div class="read_more">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor enim ut neque adipiscing ut condimentum nisi dictum. Vivamus dictum tincidunt nibh, quis lacinia diam vestibulum in. Proin consequat gravida mollis. Donec ac pulvinar massa. Curabitur ligula lectus, elementum in fringilla vel, luctus at eros. Morbi id nibh sed nunc consequat viverra. Integer tristique, massa vitae eleifend ornare, libero felis interdum neque, quis suscipit urna est eget tortor. Sed nec massa at enim suscipit luctus vitae nec sem. Praesent tellus augue, varius auctor auctor nec, rutrum eu ipsum. Aenean sit amet euismod dolor. Nam posuere nulla et ante placerat nec pellentesque diam facilisis. Donec pellentesque dapibus rhoncus. Vestibulum massa dui, lobortis sed fringilla eleifend, vulputate id risus. Phasellus nisi lorem, fermentum ut mattis eget, luctus quis nulla. Morbi scelerisque nisl at lorem porttitor non facilisis mauris eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vulputate suscipit metus, id viverra tellus dignissim quis. 
	</div>

</body>

</html>

Here is a demo link

jonnygrim · November 11, 2009

Thats spot on - just what I needed - thanks

Sign In

Expandable Post Code

Recommended Posts

jonnygrim

Link to comment

Share on other sites

isedeasy

Link to comment

Share on other sites

isedeasy

Link to comment

Share on other sites

jonnygrim

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information