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

**Shammus** · 02-03-2010, 04:36 PM

Animated Collapsible DIV v2.4
http://www.dynamicdrive.com/dynamici...edcollapse.htm

------------------------------

Quick question here. I'm working to make a "group" with just a single link "slidedown". No toggling involved. Simply for each panel that I open, all the others close up. This way, one panel at least is open at all times. I removed the links with the "slide up" function. The question is, I still want the expand.jpg and collapse.jpgs next to the link to toggle back and forth, however I don't want the image itself to be clickable or part of the event handler...just the link. How do I disable the image so that the user can't use that to toggle back and forth?

**Shammus** · 02-03-2010, 10:16 PM

Actually, I fixed this and got it working by changing the 'toggle' event to 'expand' in the first <a> tag in each line.

New issue though.... The 'data-openimage' and 'data-closedimage' attributes do not validate. Apparently they aren't valid attributes? Are there other attributes I could use instead?

**ddadmin** · 02-03-2010, 10:25 PM

"data-*" is a valid HTML 5 attribute. If you wish your page to validate, you'll need to declare the recommended HTML doctype at the top of your page:

Code:

<!DOCTYPE HTML>

**Shammus** · 02-03-2010, 10:32 PM

Here's the <doctype> I'm using on this page...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I'm not thinking it's the doctype though. The page that contains the script for the 'Animated Collapsible DIV v2.4' is also kicking up error messages for this attribute.

**ddadmin** · 02-03-2010, 10:51 PM

Try replacing that with the one I mentioned. Here's more info on this doctype.

**Shammus** · 02-03-2010, 10:57 PM

That simple doctype works, although I'd prefer my other one as changing the doctype caused a lot of other problems on my page. Is there another way to get this working?

**ddadmin** · 02-03-2010, 11:00 PM

By problems, do you mean in IE8?

**Shammus** · 02-03-2010, 11:05 PM

There are actually different issues that occur in IE 8 and Firefox 3.5. Random things like elements on the page suddenly not lining up or extra space inserted between things. The validator also kicked up a fresh new set of 30-40 items to fix. Thanks again for taking a look....

**ddadmin** · 02-03-2010, 11:42 PM

Hmm the other approach is to change the two attributes used, "data-openimage" and "data-closedimage", to something that will validate in your current doctype. The problem is there aren't that many HTML attributes at your disposal, considering "rel" is also taken by the script as well. But just as an example, lets say you decide to use "title" and "rev" respectively instead:

Code:

<a href="#" rel="toggle[jason]" title="expand.jpg" rev="collapse.jpg"><img src="collapse.jpg" style="border-width:0" /></a>

To enable the above, inside the .js file, do a search and replace, replacing all "data-openimage" with "title", and all "data-closedimage" with "rev". That should do it.