title: How to handle very similar buttons without using one function for each?
body: <p>I have a bunch of anchor links where I use javascript to fade in different divs to mimic pages. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  
      showHomePage();
  
      $('.homebutton').click(function() {
          displayNone();
          showWindow("homepage");
      } );
      $('.aboutbutton').click(function() {
          displayNone();
          showWindow("aboutpage");
      } );
      $('.gallerybutton').click(function() {
          displayNone();
          showWindow("gallerypage");
      } );
      $('.musicbutton').click(function() {
          displayNone();
          showWindow("musicpage");
      } );
  
      function displayNone() {
          $('.pagecontainer&gt;div').fadeOut(0);
      }
  
      function showHomePage() {
          $('.pagecontainer').fadeIn();
          $('#homepage').fadeIn();
      }
  
      function showWindow(name) {
          $('#' + name).fadeIn();
      }
  
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;body&gt;
  ....
  ....
  &lt;a href="#homepage" class="homebutton"&gt;Home&lt;/a&gt;
  &lt;a href="#aboutpage" class="aboutbutton"&gt;About&lt;/a&gt;
  &lt;a href="#gallerypage" class="gallerybutton"&gt;Gallery&lt;/a&gt;
  &lt;a href="#musicpage" class="musicbutton"&gt;Music&lt;/a&gt;
  ....
  ....
  &lt;div id="homepage"&gt;Home page&lt;/div&gt;
  &lt;div id="aboutpage"&gt;About page&lt;/div&gt;
  &lt;div id="gallerypage"&gt;Gallery page&lt;/div&gt;
  &lt;div id="musicpage"&gt;Music page&lt;/div&gt;
  ....
  &lt;/body&gt;
  </code></pre>
  
  <p>All pages are set to hidden at first (alpha=0), and when the link is clicked any page currently displayed is set to hidden with displayNone() and the corresponding page fades in. This all works with no problem.</p>
  
  <p>But I want to shorten this code. As you can see if I have say 50 pages, the javascript portion will get very messy as I have to write pretty much the same line 50 times. All my links have the class "<strong>_button" which corresponds to "</strong>_page", so I think there should be a shortcut to this which only needs one function? Something like:</p>
  
  <ul>
  <li>When [class name] is clicked, delete the "button" part of the class name</li>
  <li>Then append "page" to the end of the name</li>
  <li>For example when "aboutbutton" is clicked, change the name to "about", then add "page", which becomes "aboutpage"</li>
  <li>Then display that div</li>
  </ul>
  
  <p>But I'm not sure how to write this. Thanks for your help.</p>