Expandable/Collapsible Divs

Hello experts,

I have the following situation.
One div that becomes scrollable when i click "More" and collapse when i press "Less". Very easy so far.
The issue is that once i scroll the contents of the div and then press "Less" the div will collapse and the contents will not reset to the top.

For eg if my div content is:
"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:"

...when i collapse it the visible text will be the last phrase " For the best results..." and not the top of the paragraph.

What do i have to add to my code below to accomplish this?

Thanks
function expandDiv(IdDiv,IdLink) {
if(document.getElementById) {
var layer=document.getElementById(IdDiv);
var div=document.getElementById(IdLink);
if(layer){
if(layer.style.overflow=='auto'){
layer.style.height='120px';
layer.style.overflow='hidden';
div.childNodes[0].src="images/down.gif";
div.innerHTML=div.innerHTML.replace('Less','More');
}else{
layer.style.height='260px';
layer.style.overflow='auto';
div.childNodes[0].src="images/up.gif";
div.innerHTML=div.innerHTML.replace('More','Less');
}
}}}

Open in new window

azlan25Asked:
Who is Participating?
 
StingRaYCommented:
Try this, then:

function expandDiv(IdDiv,IdLink) {
if(document.getElementById) {
var layer=document.getElementById(IdDiv);
var div=document.getElementById(IdLink);
if(layer){
if(layer.style.overflow=='auto'){
layer.style.height='120px';
layer.style.overflow='hidden';
div.childNodes[0].src="images/down.gif";
div.innerHTML=div.innerHTML.replace('Less','More');
layer.scrollTop = 0;
}else{
layer.style.height='260px';
layer.style.overflow='auto';
div.childNodes[0].src="images/up.gif";
div.innerHTML=div.innerHTML.replace('More','Less');
layer.scrollTop = 0;
}
}}}
</script>

Open in new window

0
 
StingRaYCommented:
Can you show me your HTML structure?
0
 
azlan25Author Commented:
Ok here it is the test code. Try to click on "More", scroll to the bottom of it and then press "Less".
The content scrolled will remain at the bottom. I only want to see it from the beginning again.
Any ideas?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script language="JavaScript" type="text/JavaScript">
function expandDiv(IdDiv,IdLink) {
if(document.getElementById) {
var layer=document.getElementById(IdDiv);
var div=document.getElementById(IdLink);
if(layer){
if(layer.style.overflow=='auto'){
layer.style.height='120px';
layer.style.overflow='hidden';
div.childNodes[0].src="images/down.gif";
div.innerHTML=div.innerHTML.replace('Less','More');
}else{
layer.style.height='260px';
layer.style.overflow='auto';
div.childNodes[0].src="images/up.gif";
div.innerHTML=div.innerHTML.replace('More','Less');
}
}}}
</script>


<div id="div1" style="width:100px;height:80px;overflow:hidden">
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.
</div>
<div id="div2" onclick="expandDiv('div1','div2');">More</div>
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
StingRaYCommented:
This one may not meet your need but you can try:

<script language="JavaScript" type="text/JavaScript">
function expandDiv(IdDiv,IdLink) {
if(document.getElementById) {
var layer=document.getElementById(IdDiv);
var div=document.getElementById(IdLink);
if(layer){
if(layer.style.overflow=='auto'){
layer.style.height='120px';
layer.style.overflow='hidden';
div.childNodes[0].src="images/down.gif";
div.innerHTML=div.innerHTML.replace('Less','More');
layer.scrollTop = layer.scrollHeight;
}else{
layer.style.height='260px';
layer.style.overflow='auto';
div.childNodes[0].src="images/up.gif";
div.innerHTML=div.innerHTML.replace('More','Less');
layer.scrollTop = 0;
}
}}}
</script>

Open in new window


It scrolls to the last phrase when the block is collapsed.
0
 
StingRaYCommented:
This is the improved:

<script language="JavaScript" type="text/JavaScript">
var divcontent = new Array();

function expandDiv(IdDiv,IdLink) {
if(document.getElementById) {
var layer=document.getElementById(IdDiv);
var div=document.getElementById(IdLink);
if(layer){
if (!divcontent[IdDiv]) {
	divcontent[IdDiv] = layer.innerHTML;
}
if(layer.style.overflow=='auto'){
layer.style.height='120px';
layer.style.overflow='hidden';
div.childNodes[0].src="images/down.gif";
div.innerHTML=div.innerHTML.replace('Less','More');
layer.scrollTop = layer.scrollHeight;
phrases = divcontent[IdDiv].match(/([^\.]+\.\s*)$/gm);
layer.innerHTML = phrases[phrases.length-1];
}else{
layer.style.height='260px';
layer.style.overflow='auto';
div.childNodes[0].src="images/up.gif";
div.innerHTML=div.innerHTML.replace('More','Less');
layer.scrollTop = 0;
layer.innerHTML = divcontent[IdDiv];
}
}}}
</script>

Open in new window


A buffer to store the original content is added, named divcontent. The last phrase is extracted when collapsed.
0
 
azlan25Author Commented:
Hi Ray,

Thanks for your reply.
The first example works but as you said is only showing the last phrase and not the first as i need.
The second eg. makes the content dissapear when i click on "Less".
Can the first eg. be altered to show the top of the paragraph?

Thanks
0
 
azlan25Author Commented:
Yep! That was it! I should've thought of that?!
Thank you for your time
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.