Script to expand
function toggleTable() {
var lTable = document.getElementById("collapseTable");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
Html
The use of anchors allows the insertion of markings in certain points of a document, allowing the direct displacement to these points, through the creation of references.
The feature of creating anchors is widely used as an index of documents, making it easy to move the reader directly to a desired point.
A link can both reference and be a tag. This practice is used on pages that are too long, allowing the user to move from the beginning to the end of the document or vice versa. As value of this attribute we must inform the name of the mark, preceded by the sign #, if this mark belongs to the same reference page. href="#Bottom"
Destination: Marking will be the target object of a reference.
An anchor tag is defined using the (name) attribute that will be given the name by which this tag will be referenced. <a name="Bottom"></a>
If you click on the link that references this markup, a jump will be made to this point on the page where the markup was inserted.
So place this tag exactly where you want it
<table cellspacing="0" id="table1" cellpadding="0" border="0" width="100%">
<tr>
<td>
<div style="width:100%; height:330px; overflow-x: hidden;">
<table id="table2" cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td>
<a role="button" onclick="toggleTable();" class="btn btn-default btn-sm" style="display: block; width: 100%; border-radius: 0px;" data-toggle="collapse" href="#Bottom" aria-expanded="false" aria-controls="collapseExample">Contatar</a>
<div class="collapse" id="collapseExample">
<a name="Bottom"></a>
<table id="collapseTable" border="0" style="display:none">
<tr>
<td>
<form>
</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>