Glyphicon Button onlick toggle table

Question

http://jsfiddle.net/LZoesch/xovrr3uo/

<div class="container">
    <div class="panel panel-default">
        <form method="POST" action="">
            <button class="btn btn-default btn-sm pull left" name="reset"><span class="glyphicon glyphicon-stats"></span>

            </button>
            <button type="submit" class="btn btn-default btn-sm pull-right" name="reset"><span class="glyphicon glyphicon-refresh"></span>

            </button>
        </form>
    </div>
</div>
<div>
<table class="table2">
    <div id="chartCanvas" style="padding-left:5px;">
                <canvas id="canvas" style="width:98%;height:500px;"></canvas>
        <br>
    </div>
    </tbody>
    <script type="text/javascript">
      script goes here for chart.js
    </script>

</table>

Trying to get the glyphicon to toggle on/off for table "table2"

Answer 1

'table2' table tags are inappropriate. Table should have row and cell elements inside the table.

<table>
  <tr>
    <td>{{DATA}}</td>
  </tr>
</table>

As per the above syntax, add the content inside the cell .

Now use the jsfiddle link click here to get the JQuery code on how to toggle the table.

Js fiddle code:

$(".glyphicon-stats").on('click', function () {
$('.table2').toggle();

});

Let me know if any other help is needed.

Update jsfiddle link http://jsfiddle.net/mvamsianil/xovrr3uo/8/