JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<div data-role="page">
    <div data-role="content">
        <a data-role="button" data-rel="dialog" href="#dialog-page">Open Dialog</a>
    </div>
</div>

<div data-role="page" id="dialog-page">
    <div data-role="header"><h1>Header</h1></div>
    <div data-role="content">Dialog content<br /><a data-role="button" href="#" id="hide_header">Hide Header Bar</a><br /><a data-role="button" href="#" id="hide_title">Hide Title Bar</a><br /><a data-role="button" href="#" id="hide_x">Hide "X" (Close) Button</a><br /><br /><a data-role="button" href="#" id="reset">RESET DIALOG</a></div>
</div>

JavaScript

$('#hide_header').on('click', function () {
    $.mobile.activePage.children('[data-role="header"]').fadeOut();
});
$('#hide_title').on('click', function () {
    $.mobile.activePage.children('[data-role="header"]').children('h1').animate({ opacity : 0}, 250);
});
$('#hide_x').on('click', function () {
    $.mobile.activePage.children('[data-role="header"]').children('a').animate({ opacity : 0}, 250);
});

$('#reset').on('click', function () {
    $.mobile.activePage.children('[data-role="header"]').fadeIn();
    $.mobile.activePage.children('[data-role="header"]').children('h1').animate({ opacity : 1}, 250);
    $.mobile.activePage.children('[data-role="header"]').children('a').animate({ opacity : 1}, 250);
});