jqm removing a fixed navbar

The navbar is included in the header, so it is fixed and does not scroll. But in the "data" view, the navbar is not wanted.

by needlethread

HTML

<div id="tt_topbar" data-role="header" data-position="fixed"> <a href="#tt_leftpanel" data-icon="bars" class="ui-btn-left">Menu</a>

    <fieldset data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
        <input name="tt_view_sel" id="tt_view_tool" value="tool" checked="checked" type="radio">
        <label for="tt_view_tool">Mode A</label>
        <input name="tt_view_sel" id="tt_view_data" value="data" type="radio">
        <label for="tt_view_data">Mode B</label>
    </fieldset>
     <h1>Header<span id="tt_titlesuffix"></span></h1>

    <div data-role="navbar" data-position="fixed" class="tt_toolhdr">
        <ul>
            <li><a class="ui-btn-active ui-state-persist" data-panel="main" href="#">Uno</a>

            </li>
            <li><a data-panel="due" href="#">Due</a>

            </li>
        </ul>
    </div>
</div>
        <div><p>Click on Mode B to remove the navbar</p>
            <p>Unfortunately the rest of the content does not move up, unless the window is resized.</p>
            More stuff here</div>

JavaScript

$(document).ready(function () {
        $("input[name='tt_view_sel']").on('change', function () {
            view = $(this).val();
            if (view == "data") {
                $(".tt_toolhdr").hide();
            } else {
                $(".tt_toolhdr").show();
            }
        });
    });