Changing "minus" sign into "plus" sign

[phdphd]

Hi All,

 

I have a list of countries, with a sublist of cities associated with each country. There is also an associate + or - sign associated with each country name. When I click the minus sign, the associated list closes and the minus sign converts to plus sign. The reverse works also.

 

I also have a global "-" sign that when clicked collapses all the data, leaving just the country names displayed, and converts to a plus sign. This will enable the user to scroll down the data until the desired country without having to see the cities of countries that are higher in the list. The reverse works also : when the global plus sign is clicked, all data are displayed.

 

My problem is the following. If I click the global minus sign, I would like any minus signs associated with countries to appear as "+" signs. And if I click the global plus sign, I would like any plus signs associated with countries to appear as "-" signs.

 

 

Here is jsfiddle for your convience : http://jsfiddle.net/qX6k8/

 

Thanks a lot you for your help.

 

 

[cpd]

I'd start by restructuring your DOM; at the moment you have no encapsulation for each expandable section. Consider wrapping each section in a div and then using a single span to wrap the titles with an additional span tag around the [-/+] parts.

 

You can then write your JavaScript using the top node in each section, i.e. using the div that encapsulates each section, to manipulate the content within. I'd also suggest registering your event listeners in your JavaScript as opposed to inline although its not a big issue either way.

[codefossa]

Lines 49 - 55: http://jsfiddle.net/qX6k8/1/

[phdphd]

Thanks to both of you for your quick & detailed answers, and a special thanks to you Xaotique for saving me much coding time.