How to toggle a button in jQuery on click event

Question

Sorry if this beginner question, but I have some jQuery to Hide fields in SharePoint that works fine but now I am wanting to toggle (hide/show) when the user clicks a button. I feel like I am close but can't get the syntax right.

I am pretty certain it is the $("input[toggleButton]).click(function() that I am messing up. Any thoughts would be great.

<style type="text/css">
#toggleButton {
margin-top:10px;
padding-right:20px;
text-align:right;
}
</style>

<br/>

<input type="button" class="toggleButton" value="Show/Hide All Fields" id="toggleButton">


<script>
$(document).ready(function()
{
$("input[toggleButton]).click(function()

{
$("nobr:contains('Approved By')").parent('h3').parent('td').parent('tr').toggle();
$("nobr:contains('Assigned To:')").parent('h3').parent('td').parent('tr').toggle();
$("nobr:contains('Request Status')").parent('h3').parent('td').parent('tr').toggle();
});
});

</script>

Answer 1

Use

$(".toggleButton").click(function(){
    ...
});