text: Q:
  
  what is a better way of switching panels in javascript?
  
  I have some code that swaps panels when a button is pressed, hiding any others that might be on the screen before displaying the next. it is a bit messy because of the way it has to be worked around to prevent both panels from appearing at once.
  http://jsfiddle.net/zDeveloper/X4sMF/
  $(document).ready(function () {
      $("#pref-sliders-swap").appendTo($("#sliderbox"));
      $("#sliderbox").hide();
      $("#characters").hide();
      $("#currentdesires").hide();
      $("#important").hide();
  
      $("#sliderbutton").click(function () {
          $("#welcome").fadeOut(function () {
              $("#characters").fadeOut(function () {
                  $("#currentdesires").fadeOut(function () {
                      $("#important").fadeOut(function () {
                          $("#sliderbox").fadeIn();
                      });
                  });
              });
          });
      });
  
      $("#homebutton").click(function () {
          $("#sliderbox").fadeOut(function () {
              $("#characters").fadeOut(function () {    
                  $("#currentdesires").fadeOut(function () {
                      $("#important").fadeOut(function () {
                          $("#welcome").fadeIn();
                      });
                  });
              });
          });
      });
  
      $("#charactersbutton").click(function () {
          $("#sliderbox").fadeOut(function () {
              $("#welcome").fadeOut(function () {
                  $("#currentdesires").fadeOut(function () {
                      $("#important").fadeOut(function () {
                          $("#characters").fadeIn();
                      });
                  });
              });
          });
      });    
  
      $("#desirebutton").click(function () {
          $("#sliderbox").fadeOut(function () {
              $("#welcome").fadeOut(function () {
                  $("#characters").fadeOut(function () {
                      $("#important").fadeOut(function () {
                          $("#currentdesires").fadeIn();
                      });
                  });
              });
          });
      });
  
      $("#impbutton").click(function () {
          $("#sliderbox").fadeOut(function () {
              $("#welcome").fadeOut(function () {
                  $("#characters").fadeOut(function () {
                      $("#currentdesires").fadeOut(function () {
                          $("#important").fadeIn();
                      });
                  });
              });
          });
      });
  
  });
  
  The code I have placed there does exactly what I want,smoothly fading in and out the panels(at least in firefox) though it is a bit cumbersome. is there a better way to acheive the same effect?
  
  A:
  
  Try
  <!--use the class trigger to group the trigger elements, then use data-target to specify the id of the target element to be displayed-->
  <div id="sliderbutton" data-target="#sliderbox" class="trigger">sliderbutton</div>
  <div id="homebutton" data-target="#welcome" class="trigger">homebutton</div>
  <div id="charactersbutton" data-target="#characters" class="trigger">charactersbutton</div>
  <div id="desirebutton" data-target="#currentdesires" class="trigger">desirebutton</div>
  <div id="impbutton" data-target="#important" class="trigger">impbutton</div>
  
  <!--Use the class content to group all the content elements-->
  <div id="sliderbox" class="content">sliderbox</div>
  <div id="characters" class="content">characters</div>
  <div id="currentdesires" class="content">currentdesires</div>
  <div id="important" class="content">important</div>
  <div id="welcome" class="content">welcome</div>
  
  then
  jQuery(function () {
      $("#pref-sliders-swap").appendTo("#sliderbox");
      $(".content").not('#welcome').hide();
  
      var $contents = $('.content');
      $contents.not('#welcome').hide();
  
      $(".trigger").click(function () {
          var $visible = $contents.stop(true, true).filter(':visible'),
              $target = $($(this).data('target')).stop(true, true);
          if ($visible.length) {
              $visible.fadeOut(function () {
                  $target.fadeIn();
              });
          } else {
              $target.fadeIn();
          }
      });
  
  })
  
  Demo: Fiddle
  
  