asked on

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

StingRaY

Can you show me your HTML structure?

azlan25

ASKER

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

StingRaY

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.

StingRaY

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.

azlan25

ASKER

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

ASKER CERTIFIED SOLUTION

StingRaY

membership

This solution is only available to members.

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

Start Free Trial

azlan25

ASKER

Yep! That was it! I should've thought of that?!
Thank you for your time