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/dynamici...edcollapse.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 "

HTML Code:

rel="toggle[cat]"

I am not sure why this would cause a problem.

HTML Code:

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

HTML Code:

<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

HTML Code:

<!DOCTYPE html>

so that's defined as well.

Here's also a link 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:

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:

Code:

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

Code:

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

Thread: data-openimage & data-closedimage are not working

Thread Tools

Search Thread

data-openimage & data-closedimage are not working

Similar Threads

Resolved Put new data in front of existing data

Animated Collapsible DIV v2.4 -- 'data-openimage' does not validate

Resolved Ajax/jQuery Post Data not working ?

reset button not working when php data submitted

How to return data after a refresh before you post data

Bookmarks

Bookmarks

Posting Permissions