Header button to do something else
I'm wanting to use the following code, so that when the header data button is clicked it shows a div in the main content area. Clicking it again will close that div. Not sure how to do this so that it works, due to the way that the head buttons seemingly function in JQM.
Sorry if this a silly and obvious question!
<div data-theme="a" data-role="header"><div data-type="horizontal" data-role="controlgroup" class="ui-btn-left" >
<div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
<a href="" data-role="button" data-icon="logout" data-iconpos="notext" data-theme="a" data-inline="true" class="button">My button</a>
</div>
</div>
<p class="show-div">Show me</p>
<script>
$("div.button").click(function () {
$("p.show-div").toggle();
});
</script>