Hi guys
I have a control form where I have various fields, one of which has tons of text and have been treying to add a javascript function to enable a read more link which would display the rest of the content.
Has anybody already done something like this they could share?
This is what I have tried so far:
no1:
content:
This content coming from database of course…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.
<div id=“more” style=“display:none;”>
Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.
</div>
<a href=“javascript:showMore()” id=“link”>Read More >></a>
the javascript added to the onload event.
?>
<script type=“text/javascript”>
function showMore(){
//removes the link
document.getElementById(‘link’).parentElement.removeChild(‘link’);
//shows the #more
document.getElementById(‘more’).style.display = “block”;
}
</script>
<?php
didnt work 
Another method I tried was this:
$(function(){ /* to make sure the script runs after page load / $(’.item’).each(function(event){ / select all divs with the item class / var max_length = 150; / set the max content length before a read more link will be added / if($(this).html().length > max_length){ / check for content length / var short_content = $(this).html().substr(0,max_length); / split the content in two parts / var long_content = $(this).html().substr(max_length); $(this).html(short_content+ ‘<a href="#" class=“read_more”><br/>Read More</a>’+ ‘<span class=“more_text” style=“display:none;”>’+long_content+’</span>’); / Alter the html to allow the read more functionality / $(this).find(‘a.read_more’).click(function(event){ / find the a.read_more element within the new html and bind the following code to it / event.preventDefault(); / prevent the a from changing the url / $(this).hide(); / hide the read more button / $(this).parents(’.item’).find(’.more_text’).show(); / show the .more_text span */ }); } }); }); The .item was linked to the field in question i.e. #hidden_field_data_field_00 It did hide all the content instead of displaying some of it… Again another fail lol Any ideas or solutions would be great 
thanks in advance