Altering an ASP.Net jquery to reusable/generic function - html

Question

I have a .net form with multiple div sections. I have a button which toggles the visibility for each of them. Currently I have only managed to get it working with one block of jquery for each btn/div.
Could I please get some assistance in making a single jquery code block that can be reused for n div sections?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSection1").click(function () {
if ($(this).val() == "Show") {
$("#Section1").show();
$(this).val("Hide");
} else {
$("#Section1").hide();
$(this).val("Show");
}
});
</script>
<input id="btnSection1" value="Show" runat="server" type="button" name="btnSection1"/>
<div id="Section1" style="display: none;">
Section 1 text
</div>
Any advice in converting the jquery from using val to text so as to use asp:Button rather than <input' type="button" />? The following does not work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSection1").click(function () {
if ($(this).text() == "Show") {
$("#Section1").show();
$(this).text("Hide");
} else {
$("#Section1").hide();
$(this).text("Show");
}
});
</script>
<asp:Button ID="btnSection1" runat="server" Text="Show" name="btnSection1"/>
<div id="Section1" style="display: none;">
Section 1 text
</div>
Cheers in Advance.