title: jquery show / hide multiple elements by id
body: <p>I have 3 paragraph and 2 buttons which are next / previous. On initial load the user can only see the first paragraph and a next button, unless he is on paragraph 2 there will be a next and a previous button and only previous button on the final paragraph. This sums what I've done.</p>
  
  <p>My code works properly except the back button, but what I'm really after is a cleaner / better way of doing the same thing.</p>
  
  <p>My html here:</p>
  
  <pre><code>&lt;p id="page-1" class="ui-bottom-article"&gt;
  blah blah blah 1
  &lt;p id="page-2" class="ui-bottom-article"&gt;
  blah blah blah 2
  &lt;/p&gt;
  &lt;p id="page-3" class="ui-bottom-article"&gt;
  blah blah blah 3
  &lt;/p&gt;
  
  &lt;a id="rd_bk" href=""&gt;back&lt;/a&gt;&lt;a id="rd_more" href=""&gt;Read more...&lt;/a&gt;
  </code></pre>
  
  <p>my script</p>
  
  <pre><code>$(function() {
  
       var pageNumber = 1;
           $('p.ui-bottom-article').hide();
           $('#page-1').show();
           $('#rd_bk').hide();
  
  
  
      $('#rd_more, #rd_bk').click(function(e){
          e.preventDefault();
  
       if(pageNumber == 1){
           $('p.ui-bottom-article').hide();
           $('#page-2').show();
            $('#rd_bk').show();
          pageNumber++;
  
          }else if(pageNumber == 2){
           $('p.ui-bottom-article').hide();
           $('#page-3').show();
           $('#rd_more').hide();
           $('#rd_bk').show();
  
          }else if(pageNumber == 3){
           $('p.ui-bottom-article').hide();
           $('#page-1').show();
           $('#rd_more').hide();
          pageNumber--;
          }
  
      }//end of if statement
      );//end of click function
  
  }); // end of function
  </code></pre>