Animated expand/collapse doesn't work if ID contains period

[Claes]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:
Hi and thanx for a good script!
The script works fine for me until we decided to use periods (.) in the ID attribute of the DIV to be expanded/collapsed. 'OK, but then don't use periods...' you might say, but unfortunately I have to... Periods are BTW valid in ID attr. according to W3C Spec.

Works:


<div id="divToBeExpanded">Some content to be expanded/collapsed</div>

Does not work:


<div id="div.to.be.expanded">Some content to be expanded/collapsed</div>


Unfortunately, we NEED to have periods in the ID attribute. Any help much appreciated.

/Claes

[ddadmin]

The issue has to do with dot (.) and certain other characters having special meaning in jQuery, in the case of dot, a CSS class name. The fix per Google Groups (http://groups.google.com/group/jquery-en/browse_thread/thread/ba072168939b245a?pli=1) is the following:


Use two backslashes before each special character within the ID inside your jQuery code.

A backslash in a jQuery selector escapes the next character. But you need
two of them because backslash is also the escape character for JavaScript
strings. The first backslash escapes the second one, giving you one actual
backslash in your string - which then escapes the next character for jQuery.


$('.first\\:\\:second')

With that said, try the following modified .js file, which should address this issue.