PDA

View Full Version : data-openimage & data-closedimage are not working



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

jscheuer1
04-25-2015, 07:11 AM
Make sure the images you are using are there. For instance:

http://test.topstagingsite.com/top-circle/collapse.jpg

is a 404 Not Found. But:

http://topcircle.topgreekgyms.gr/wp-content/themes/method/collapse.jpg

is there

Unless you specify the path for the images, the script will look in the same folder as the page.

kat_indo
04-25-2015, 10:45 PM
Thank you for your reply @jscheuer1!

Even if I change the urls for the images it doesn't work.
For example, I tried this:

<a href="javascript:animatedcollapse.toggle('google4')" data-openimage="http://topcircle.topgreekgyms.gr/wp-content/themes/method/collapse.jpg" data-closedimage="http://topcircle.topgreekgyms.gr/wp-content/themes/method/expand.jpg"><img src="http://topcircle.topgreekgyms.gr/wp-content/themes/method/collapse.jpg" border="0" /></a>

It still only shows the collapse image.

I think that for some reason doesn't call the function to change the buttons.

Kat

jscheuer1
04-27-2015, 06:49 PM
Ah, I think I get it, those data- shortcuts only appear to be for this syntax:


<a href="#" rel="toggle[google4]" data-openimage="http://topcircle.topgreekgyms.gr/wp-content/themes/method/collapse.jpg" data-closedimage="http://topcircle.topgreekgyms.gr/wp-content/themes/method/expand.jpg"><img src="http://topcircle.topgreekgyms.gr/wp-content/themes/method/collapse.jpg" border="0"></a>

When using:


<a href="javascript:animatedcollapse.toggle('google4')"

as you have in your post, they're not available.

There could also be other problems. If you want more help, please post a link to the page on your site that has the problematic code.