How to Hide and Show Header and Footer Toolbar on Pageshow

Question

im working with jquery mobile in my project and i implement a header and footer toolbar.

what i try to do is:

always when i open a page, i want that the toolbars are hidden, and only when i click 1 time on the touchscreen i want to open them.

I have a script from a friend of mine and it works,

but i have to do a double click on the touchscreen to open them...

exists anyway to do this only with 1 click?

Note: i have in my project several data-role="pages"

my code:

HTML5:

 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true" class="hidden">TESTE</div>

<div data-role="footer" data-theme="a" data-position="fixed" data-id="footer2" data-fullscreen="true" class="hidden">TESTE</div>    

Script:

  function enableHeaderFooter() {
    $(document).off("touchend", enableHeaderFooter);
    $("header, footer").removeClass("hidden");
  }
  $(document).on("touchend", enableHeaderFooter);

CSS:

.hidden{display:none}

Answer 1

give the header and footer CSS classes that contain the declaration "display: none", and use an javascript touch event handler bound to window to show them by removing that class. Also note that data-role="header" is a bit silly, since html has a element for this. Secondarily, note that you've given both id=footer which is guaranteed to cause problems.

<header class="hidden" ...>...</header>
...
<footer class="hidden" ...>...</footer>

+

<script>
  function enableHeaderFooter() {
    $(document).off("touchend", enableHeaderFooter);
    $("header, footer").removeClass("hidden");
  }
  $(document).on("touchend", enableHeaderFooter);
</script>