title: Disable/Hide Header and Footer Howto
body: <p>I create my JQM app with multipage and external header footer. I initialize the header and footer with the following code at certain point of my app (not the first page of the app):</p>
  
  <pre><code>function initHeaderFooter(){
      $( "[data-role='header'], [data-role='footer']" ).toolbar();
  }
  </code></pre>
  
  <p>Now my problem, after user logout, back to first page, I'm having problem removing the header and footer.</p>
  
  <p>I tried using the following code hope to have the header and footer remove. But instead of removing the bar, it show an Empty Bar instead of hiding the bar:</p>
  
  <pre><code>$('.ui-footer').html($('').navbar());
  </code></pre>
  
  <p>Please advice the proper way to remove header and footer.</p>
  
  <p><strong>To show the header and footer again, I call the initialize function but it doesn't show up:</strong></p>
  
  <pre><code>$(document).on('pagecreate', '#userMainPage', function () {
      initHeaderFooter();
      $('.ui-footer').html($(
      '&lt;div id="footerButton" data-role="navbar"&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#restaurantList" data-transition="flow"&gt;Find Restaurant&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;My Favourite&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;'
  ).navbar()); });
  </code></pre>