PDA

View Full Version : Accordion Content script (v1.3) ... need some help



WiMu
05-25-2008, 12:14 PM
1) Script Title: Accordion Content script (v1.3)

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

3) Describe problem:

There are two CSS classes to be applied to the menue-header when it's collapsed and expanded; is it possible to add those classes to the menue-content as well, when it is collapsed/expanded? You have opened the content of the first header, for example; when expanding the second header's content, the collapsing content of the first header sould have another background-image/font-color/etc.

P.S.: very nice script! Sorry for my lack of English.

ddadmin
05-25-2008, 04:13 PM
Sure, if you mean the same two CSS classes that are applied to the header, but to the content DIVs as well. Inside ddaccordion.js, find and add to the two functions expandit() and collapseit() with the lines in red:


expandit:function($targetHeader, $targetContent, config, isclicked){
$targetContent.slideDown(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isclicked)})
this.transformHeader($targetHeader, config, "expand")
$targetContent.addClass(config.cssclass.expand).removeClass(config.cssclass.collapse)
},

collapseit:function($targetHeader, $targetContent, config, isclicked){
$targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isclicked)})
this.transformHeader($targetHeader, config, "collapse")
$targetContent.addClass(config.cssclass.collapse).removeClass(config.cssclass.expand)
},

WiMu
05-25-2008, 05:06 PM
huh ... this does very "interesting" effects on my css ;) I think I'll have to make some adjustments to get the intended look, but works great.

Thanks

ddadmin
05-25-2008, 07:42 PM
You can always replace the variables config.cssclass.expand and config.cssclass.collapse with 2 literal CSS classes as well, different from those applied to the header, such as "opencontent" and "closedcontent".