JQuery -How to fadeOut instead of Sliding up?

Question

I have 2 sections called .about-us and .price-list. With 2 buttons that activates them .prices and .about-us-btn. The 2 sections both are hidden by default with JQuery and have a .slideToggle event for each, if one is visible though, it'll slide up if I click the other button for it.

Now I figured, instead of sliding back up, they can do a fadeOut event. It works, but only if the .price-list is visible first, then click on .prices. (both sections are in the same position, but only one are visible when I click a button). If .about-us is visible first, then if I click on the .prices button, the .about-us will slideUp instead of fading out.

Will anyways. Hope you understand and can help me out!. Heres my JQuery Code:

$(document).ready(function(e){
  // Price-list & About-us are hidden by Javascript
  $("aside.price-list, aside.about-us").hide();
  // Create a slide for the price-list
    $("button.prices").click(function(){
      $("aside.about-us").fadeOut(300);
      $("aside.price-list").slideToggle(300);
  }); 
  // Create a slide for the about-us
    $("button.about-btn").click(function(e){
        $("aside.about-us").slideToggle(300);
        $("aside.price-list").fadeOut(300);
    });

});

Answer 1

Looks like you are trying to create jQuery Accordian effect. The following link should help you.

http://docs.jquery.com/UI/Accordion

Answer 2

Instead of .slideToggle() you should use .slideUp() and .slideDown() explicitly here (since you don't know what state they're in initially, like this:

$(function() {
  $("aside.price-list, aside.about-us").hide();
  $("button.prices").click(function() {
    $("aside.about-us").fadeOut(300);
    $("aside.price-list").slideDown(300);
  }); 
  $("button.about-btn").click(function() {
    $("aside.about-us").slideDown(300);
    $("aside.price-list").fadeOut(300);
  });
});

Or, if you wanted to completely fade each out before the slide happened on the other, use the .fadeOut() callback, like this:

$(function() {
  $("aside.price-list, aside.about-us").hide();
  $("button.prices").click(function() {
    $("aside.about-us").fadeOut(300, function() {
      $("aside.price-list").slideDown(300);
    });
  }); 
  $("button.about-btn").click(function() {
    $("aside.price-list").fadeOut(300, function() {
      $("aside.about-us").slideDown(300);
    });
  });
});