asked on

collapsible div

Hi experts,
I want to ask if there is any posibility to show only part of a content inside a div. Let's say i have a text like:
"Experts are ready to help solve your problem. The quality of your question will directly influence the speed and accuracy of the answers you receive. For the best results, use the following tips"
I only want to show the first 2 sentences and after the word "receive" i'll put a read more.. to click and show me the rest of the div. The thing is not to use 2 layers one on top of the other because for google it will be duplicate content.
I also used substr function in php like substr($query['description'], 0, 500) and for the second part from 500, but it didn't worked because it wraped on second line.

That's it! Thanks in advance for the replys.

Tony O'Byrne

After the second sentence, you could have a 'div' tag whose visibility is set to hidden. Then add a link that activates some javascript to make it visible.

Try the code pasted below and see if that helps you out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
 
	<script>
		function more( ){
			document.getElementById( "article_more" ).style.visibility="visible" ;
		}
	</script>
</HEAD>
 
<BODY>
 
<div id="article">sentence one.  sentence two.<a href="#" onclick="javascript:more( );">more...</a><div id="article_more" style="visibility:hidden;">  sentence three.  sentence 4.</div></div>
</BODY>
</HTML>

Open in new window

azlan29

ASKER

Sorry can't use this because i get the text from db field as one like i specified above ($query['description']). This means i have to split it somehow after the first paragraph or number of words. As i said before i already split it with substr($query['description'], 0, 500) and then on hidden div i had the chars starting from 500. But it's not working like this because it splits on second row.
For example i have this text:
"Experts are ready to help solve your problem. The quality of your question will directly influence the speed and accuracy ...Read more" if i click read more the sentence displays from second row and the text would become:
"Experts are ready to help solve your problem. The quality of your question will directly influence the speed and accuracy <split here>
of the answers you receive. For the best results, use the following tips"

The sentence should continue right after "accuracy" and not on the second line!
Do you understand my issue?
Thanks

Tony O'Byrne

Ok, so your issue is with the line break, rather than expanding out the text?

If so, can you post some relevant code? It'll be easier if I can see the HTML - it'll give me something to chew on. :)

azlan29

ASKER

Ok here it goes:
1) The JS function showHide(description), see it in the code snippet.
2) PHP code:
<div><?php echo substr($query['description'], 0, 500); ?>
<a href="#" id="overview-show" onclick="showHide('overview');return false;">... Read more</a>
<div id="overview" style="display: none;"> <?php echo substr($query['description'], 500); ?> <a href="#" id="overview-hide" onclick="showHide('overview');return false;"> Read less</a>
</div></div>

Thanks

function showHide(description) {
	if (document.getElementById(description)) {
		if (document.getElementById(description+'-show').style.display != 'none') {
			document.getElementById(description+'-show').style.display = 'none';
			document.getElementById(description).style.display = 'block';
		}
		else {
			document.getElementById(description+'-show').style.display = 'inline';
			document.getElementById(description).style.display = 'none';
		}
	}
}

Open in new window

azlan29

ASKER

Solutions anyone?!

ASKER CERTIFIED SOLUTION

Tony O'Byrne

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

azlan29

ASKER

Yep thanks man, works like a charm!