title: Google Org Chart with hyperlink and 1 click expand/collapse
body: <p>I am trying to use the Google Org Chart control. I would like it to have a single click expand/collapse of nodes (instead of the default double click one) and also provide a hyperlink to the profile page of the user.</p>
  
  <p>My hyperlink code works fine with the default double click expand/collapse. However, if I add a listener for the 'select' event to enable single click expand/collapse, the hyperlink stops working.</p>
  
  <p>JSFiddle here <a href="https://jsfiddle.net/oxzabtyg/" rel="nofollow">https://jsfiddle.net/oxzabtyg/</a></p>
  
  <p>here is my code</p>
  
  <pre><code> google.charts.load('current', {packages:["orgchart"]});
        google.charts.setOnLoadCallback(drawChart);
  
     function drawChart() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('string', 'Manager');
          data.addColumn('string', 'ToolTip');
          // For each orgchart box, provide the name, manager, and tooltip to show.
          data.addRows([
            [{v:'Mike', f:'Mike&lt;div&gt;&lt;a href="http://www.google.com"&gt;google&lt;/a&gt;&lt;/div&gt;'},'', 'The President'],
            [{v:'Jim', f:'Jim&lt;div&gt;&lt;a href="http://www.google.com"&gt;google&lt;/a&gt;&lt;/div&gt;'},'Mike', 'VP'],
            ['Alice', 'Mike', ''],
            ['Bob', 'Alice', ''],
            [{v:'John', f:'John&lt;div&gt;&lt;a href="http://www.google.com"&gt;google&lt;/a&gt;&lt;/div&gt;'},'Bob', 'VP'],
            ['Carol', 'Bob', ''],
            [{v:'Jake', f:'Jake&lt;div&gt;&lt;a href="http://www.google.com"&gt;google&lt;/a&gt;&lt;/div&gt;'},'John', 'VP']
          ]);
          // Create the chart.
          var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  
  
  
          // selection
          google.visualization.events.addListener(chart, 'select', function () {
            // get the row of the node clicked
            var selection = chart.getSelection();
            var row = selection[0].row;
            // get a list of all collapsed nodes
            var collapsed = chart.getCollapsedNodes();
            // if the node is collapsed, we want to expand it
            // if it is not collapsed, we want to collapse it
            var collapse = (collapsed.indexOf(row) == -1);
            chart.collapse(row, collapse);
            // clear the selection so the next click will work properly
            chart.setSelection();
                  });
  
  
           // Draw the chart, setting the allowHtml option to true for the tooltips.
          chart.draw(data, {allowHtml:true, allowCollapse:true});
              }
  </code></pre>