Corey Child Corey Child - 29 days ago 5
jQuery Question

Virtual "Back Button" jquery

I am creating a mobile web app, I have a login/ signup page where users can choose the method they want.
In order to reduce the refresh rate of pages I am hiding and showing objects depending on what the user clicks with jquery.

I have virtual back buttons on each of the 'pages' which hide/show the objects including the back buttons themselves, each time I need to add an extra 'page' I have to add and call the different buttons.

Is there a way I can have one button and use that depending on what elements are hidden/shown?



<div id="go_button"</div>
<div id="next_button"</div
<div id="backbutton1"</div>
<div id="backbutton2"</div>

<div id="page1"
<p> some information here </p>

<div id="page2"
<p> some more information here </p>





etc etc


Would something like this work for you?

I checked the currently visible page, and based on that and what button is clicked, it would go forward or back.

  $go = $('#go_button'),
  $next = $('#next_button'),
  $back = $('#backbutton'),
  $pages = $('div[id^=page]');

$ {

$ {
  var $current = $pages.filter(':visible'); // Get currently visible page

  if (!$$pages.last())) { // If this is not the last page, do something
      .hide() // hide current page
      .next() // get next page
      .fadeIn(250); // fade in next page

// Opposite of the $
$ {
  var $current = $pages.filter(':visible');

  if (!$$pages.first())) {
div[id^=page] {
  padding: 5px 10px;
  border: 1px solid #ddd;
  display: none;

#backbutton {
  display: none;
<script src=""></script>
<button id="go_button">go</button>
<button id="next_button">next</button>
<button id="backbutton">back</button>

<div id="page1">
  <p> 1 some information here </p>
<div id="page2">
  <p> 2 some more information here </p>
<div id="page3">
  <p> 3 more information here </p>
<div id="page4">
  <p> 4 more! more! more! more!</p>