Contractible Headers Menu, Plus and Minus Signs

[cesiel1993]

1) Script Title: Contractible Headers

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

3) Describe problem: I'm wondering if it's possible to have the plus signs turn to minus signs once they are clicked on and expanded.

I have my content and titles (two images for titles - one with plus and one with minus) as two different div classes.

Title CSS:

.rb_title {
background-image: url(../images/rb_title-plus.png); (or rb_title-minus.png for a minus sign)
width: 190px;
height: 23px;
padding: 7px 0px 0px 10px;
margin-top:7px;
margin-bottom:3px;
font: 14px Arial, Sans-Serif;
font-weight: bolder;
color: #FFFFFF;
cursor:pointer;
}

Content CSS:

.rb_content {
width: 190px;
margin: 0 auto;
}

Thanks!

[ddadmin]

Short answer, use Switch Content script (http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm) instead. :) "Contractible Headers" script is actually based on an older version of mentioned script, but the new one contains numerous new features, including what you're asking.

[cesiel1993]

Is there a way to use both jquery and mootools together? SmoothGallery requires it and I'd like to use that along side with this menu.

[stevenng]

You can use the jQuery JS library and this snippet on a DL (definition list):

$("dt a").toggle(
function(){
$(this).parent().next().slideDown();
$(this).find("img").attr("src","/icon/dashminus_sm.gif");
},
function(){
$(this).parent().next().slideUp();
$(this).find("img").attr("src","/icon/dashplus_sm.gif");
}
);