モーダルウィンドウを折りたたみフォームに組み込む方法について

こんばんは。閲覧ありがとうございます。
###前提・実現したいこと

前提として、GoogleChartのグラフと折りたたみフォームをtooltipに組み込むことや、モーダルウィンドウを表示することは出来るようになりました。[前提]
そこで、GoogleChartのtooltipから折りたたみフォーム(ボタン)を押すとモーダルウィンドウを出し文字列を表示できるようにしたいです。[実現したいこと]

そこで、折りたたみフォームに上手いことモーダルウィンドウを組み込む方法がよくわかりません...色々と試しましたが上手くいきませんでした。

↑このクリックで展開を押すと、↓のモーダルウィンドウを表示したいということです。

###該当のソースコード
ある程度は省略しています。今回の質問内容に対して重要だと思われる部分を掲載してます。

php
1          <a data-target="con1" class="modal-open">リンク</a>
2
3          <div id="con1" class="modal-content">
4          <p>テストコメントテストコメントテストコメントテストコメントテストコメントテストコメント</p>
5          <p><a class="modal-close">閉じる</a></p></div>
6
7    <script type="text/javascript">
8     google.charts.load('current', {'packages':['corechart']});
9      google.charts.setOnLoadCallback(drawChart);
10
11      function drawChart() {
12        var dataTable = new google.visualization.DataTable();
13        dataTable.addColumn('string', 'Year');
14        dataTable.addColumn('number', 'Sales');
15        // A column for custom tooltip content
16        dataTable.addColumn({type: 'string', role: 'style'});
17        dataTable.addColumn({type: 'string', role: 'tooltip', 'p':{html:true}}); /////
18        var test1 = "文字列テスト";
19        var htmltest = 
20        '<div onclick="obj=document.getElementById(\'open\').style; obj.display=(obj.display==\'none\')?\'block\':\'none\';"><a style="cursor:pointer;">▼ クリックで展開</a></div><div id="open" style="display:none;clear:both;">'+test1+'</div>';
21
22       
23
24
25
26        dataTable.addRows([
27          ['2010', 600, 'stroke-color:##FA5858', htmltest],
28          ['2011', 1500, 'stroke-color:#3366cc', 'Sunspot activity made this our best year ever!'],
29          ['2012', 800, 'stroke-color:#3366cc', '$800K in 2012.'],
30          ['2013', 1000, 'stroke-color:#3366cc', '$1M in sales last year.']
31        ]);