Hi

Does anyone have an example of the code needed to show or hide text on a page

The type of thing I'm looking for is the

Topic 1 (click here for more)
Topic 2 (click here for more)
Topic 3 (click here for more)
Topic 4 (click here for more)


becomes

Topic 1 (click here for more)
Topic 2 (click here for less)

this is more information about topic 2
this is more information about topic 2
this is more information about topic 2
this is more information about topic 2
this is more information about topic 2
this is more information about topic 2

Topic 3 (click here for more)
Topic 4 (click here for more)


This is one of those question where if you knew the terminolgy you could search for it

Thanks



Dave

One way of doing this would be by using Iowa Computer Gurus' Expandable Text module. It's free.

If you want to do this on your own, it's probably best to look for some jQuery code that can do this. As an example, look at http://www.learningjquery.com/2006/...-and-hide. Be sure to look at the his first post, too.

Hi Joe

You used the magic 'word' Free

I've had some interaction with Iowa in the past, that time they could not help me but their service was superb

Thanks


Dave

The creative force behind IowaComputerGurus is Mitchel Sellers. He's a great guy, and a great contributor to the DotNetNuke Community.

I've accomplished this with the forms and list module here
http://kchsfoundation.org/scholarships.aspx (click details)

However, how I accomplished it was using the XSL file and customizing it to output java script to expand/hide the divs. Not something I'd recommend unless you have a pretty deep understanding of xsl and JS. That being said, here is the code that makes it work.
You need this in your skin file somewhere ahead of the forms and list module


function toggle(divid, hrefid) {
//alert(divid + " " + hrefid);

var ele = document.getElementById(divid);
var text = document.getElementById(hrefid);
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Details";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}

} //toggle

Then, you need to edit your xsl file with this to get the proper js output

scholarHref
javascript:toggle('scholarDiv', 'scholarHref');Details


You will need to change the second to last line. That was the column details in my form, you would need to change that to your column with the text you want to expand.

Posted By Joseph Craig on 2012-03-07 08:17 AM
One way of doing this would be by using Iowa Computer Gurus' Expandable Text module. It's free.

If you want to do this on your own, it's probably best to look for some jQuery code that can do this. As an example, look at http://www.learningjquery.com/2006/...-and-hide. Be sure to look at the his first post, too.

Hi Joe

Brilliant......

IWG Module did exactly what I wanted

Regards


Dave