When you click a node a second time, it deselects the node, so when you click the node and then click the + sign, there is no selection to grab. There are two ways to handle this:
1) clear the selection after a user selects the node (this happens in your + sign event handler, but not in the node itself) 2) track the previously selected node, and if the current selection is empty, expand/collapse the previous node Also of note, your code adds another event listener to the div every time the node is clicked, which is entirely unnecessary and will slow down the application if users expand and collapse a node repeatedly. Use the jQuery #on method to assign event handlers to your + signs once. Here's one way of doing it: http://jsfiddle.net/asgallant/w8Ytq/ On Friday, September 21, 2012 9:03:06 AM UTC-4, selva wrote: > > Here the code i done. That plus icon click works > but when i click the whole box > the plus icon stops work on first click > i debuged the code. the error is > *TypeError: selection[0] is undefined* > **** > > *var row = selection[0].row; > * > > > code: > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <script src="http://code.jquery.com/jquery-1.8.2.min.js";></script> > <script type='text/javascript' src='https://www.google.com/jsapi > '></script> > .plus{ > position: relative; > top: 0px; > height: 0px; > } > </style> > <script type='text/javascript'> > google.load('visualization', '1', {packages:['orgchart']}); > google.setOnLoadCallback(drawChart); > function drawChart() { > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Name'); > data.addColumn('string', 'Manager'); > data.addColumn('string', 'ToolTip'); > data.addRows([ > [{v:'Mike', f:'Mike<div style="color:#196589; > font-style:italic">President</div><div class="plus"><img src=" > http://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png";></div>'}, > > '', 'The President'], > [{v:'Jim', f:'Jim<div style="color:#196589; > font-style:italic">Vice President</div><div class="plus"><img src=" > http://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png";></div>'}, > > 'Mike', 'VP'], > ['Alice', 'Mike', ''], > [{v:'Bob', f:'Bob<div class="plus"><img src=" > http://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png";></div>'}, > > 'Jim', 'Bob Sponge'], > ['Carol', 'Bob', ''] > ]); > var chart = new > google.visualization.OrgChart(document.getElementById('chart_div')); > chart.draw(data, {allowHtml:true}); > for (var i = 0; i < data.getNumberOfRows(); i++) { > chart.collapse(i, true); > } > google.visualization.events.addListener(chart, 'select', function () { > $('div.plus').click(function() { > var selection = chart.getSelection(); > var row = selection[0].row; > var collapsed = chart.getCollapsedNodes(); > var collapse = (collapsed.indexOf(row) == -1); > chart.collapse(row, collapse); > chart.setSelection(); > }); }); > } > </script> > </head> > <body> > <div id='chart_div'></div> > </body> > </html> > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/N4mVx4tz4ygJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
![http://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png"](https://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png"){kind=link}