kat_indo
04-24-2015, 08:13 PM
1) Script Title: Animated Collapsible DIV v2.4
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
3) Describe problem: First of all thank you for sharing this code! You saved me a lot of problems and time!
I am using #2 set up in one of the pages (Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.)
It works great and when I expand one div the other one collapses.
Here's the problem though:
I don't want to show the "Slide Up/Slide Down" links. I only want to use the image and have it change from "Expand" to "Collapse" accordingly.
The code below doesn't work at all. When I use it the div won't expand at all.
I noticed that the problem is caused by the use of "
rel="toggle[cat]" I am not sure why this would cause a problem.
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a>
I adjusted the code to this:
<a href="javascript:animatedcollapse.toggle('benefits1')" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="http://topcircle.topgreekgyms.gr/wp-content/themes/method/collapse.jpg" border="0" /></a>
In that case the div expands & collapses wonderfully, but the image won't change. It always shows the "Collapse" image.
I have checked all the instructions over and over again and even checked your HTML in the examples you provide, but I cannot make it work.
I am using your code in a HTML page placed on a WP website. I use
<!DOCTYPE html> so that's defined as well.
Here's also a link (http://test.topstagingsite.com/top-circle/#seventh) to the page.
What am I missing here?
Kat
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
3) Describe problem: First of all thank you for sharing this code! You saved me a lot of problems and time!
I am using #2 set up in one of the pages (Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.)
It works great and when I expand one div the other one collapses.
Here's the problem though:
I don't want to show the "Slide Up/Slide Down" links. I only want to use the image and have it change from "Expand" to "Collapse" accordingly.
The code below doesn't work at all. When I use it the div won't expand at all.
I noticed that the problem is caused by the use of "
rel="toggle[cat]" I am not sure why this would cause a problem.
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a>
I adjusted the code to this:
<a href="javascript:animatedcollapse.toggle('benefits1')" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="http://topcircle.topgreekgyms.gr/wp-content/themes/method/collapse.jpg" border="0" /></a>
In that case the div expands & collapses wonderfully, but the image won't change. It always shows the "Collapse" image.
I have checked all the instructions over and over again and even checked your HTML in the examples you provide, but I cannot make it work.
I am using your code in a HTML page placed on a WP website. I use
<!DOCTYPE html> so that's defined as well.
Here's also a link (http://test.topstagingsite.com/top-circle/#seventh) to the page.
What am I missing here?
Kat