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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
azlan25Author Commented:
Yep! That was it! I should've thought of that?!
Thank you for your time
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.