Add software back button in app designer intel xdk at the top - html

Question

I have 2 pages in my index.html in XDK. I navigate from one to the other. I want to add a back button just like the templates but it's not possible.
This is my html:
<div class="upage vertical-col left" id="mainpage">
<div id="SubPage" class="upage-content vertical-col left ">
<div class="tarea widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" name="uib_w_1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div class="text-container">
<p>This is the main page</p>
</div>
</div>
<button class="btn widget uib_w_2 d-margins btn-default" data-uib="twitter%20bootstrap/button" data-ver="1" id="buttonSubPage">Go to sub page</button>
</div>
<div id="SubPage2" class="upage-content vertical-col left hidden"><span class="widget uib_w_3 d-margins badge" data-uib="twitter%20bootstrap/badge_and_label" data-ver="1">This is subfile 2</span>
</div>
</div>
I want to add the back button to "SubPage2". How can I achieve this? I'm working with a blank template in the app designer.

Answer 1

Add This code
$(document).ready(function(){
$("#buttonSubPage").click(function(){
$(".text-container").hide();
$("#SubPage2").show();
});
});
See Fiddle

Answer 2

After you add your header to the app designer, switch to the Code view look for the following code in newly created header
<div class="widget-container content-area horiz-area wrapping-col left"></div>
and then add the button code,
<button data-uib="twitter%20bootstrap/button" data-rel="back" data-ver="1" id="back">Back</button>
the data-rel controls the back action, without need for extra javascript.