[jQuery] beginner question on show/hide and reusing functions

[illtron]

I'm new to (writing anything myself with) jQuery, so bear with me if
this is a boneheaded question.

I'm trying to build a box that starts with six options, then if you
click one of them, that content fades out, and is replaced with the
content for that option. (You're given a different search box for each
one).

This is the code I have to show and hide. It sort-of works. It's
certainly not optimal.  In the actual code I have five more of that
second function, each one specific to the div that is revealed. I know
there has got to be a way to reuse the code.

Based on the HTML below, can you help me optimize the jQuery code so I
don't have to repeat things six times?

Also, what I have here does work, but it's hella choppy in IE. Is
there a better way to fade out and then fade in?

<script type="text/javascript">

$(document).ready(function() {
 // hides the boxes before the page loads
  $('.searchpanel').hide();

 // show and hide
  $('a.show').click(function() {
    $('#searchoptions').hide('slow');
    $('#musicsearch').show('slow');
    return false;
  });

//
// And five more just like the one above
//


// shows all
  $('a.showall').click(function() {
    $('#searchoptions').show('slow');
        $('.searchpanel').hide();
    return false;
  });


});

</script>

Here's the HTML I'm working with.

        <div id="listings">
                <div id="searchoptions">
                        <h3>What are you looking for?</h3>
                        <ul id="searches">
                                <li><a href="#musicsearch" 
class="showmusic"><span>Music</span></
a></li>
                                <li><a href="#eventsearch" 
class="showevents"><span>Events</span></
a></li>
                                <li><a href="#restaurantsearch"
class="showfood"><span>Restaurants</span></a></li>
                                <li><a href="#barsearch" 
class="showbars"><span>Bars &amp; Clubs</
span></a></li>
                                <li><a href="#hotelsearch" 
class="showhotels"><span>Places to
stay</span></a></li>
                                <li><a href="#recreationsearch" 
class="showrec"><span>Attractions
&amp; recreation</span></a></li>
                        </ul>
                </div>

                <div id="searchboxes">

                <div id="musicsearch" class="searchpanel">
                        <h3>Search for Music</h3>
                        <p>form goes here</p>
                        <p><a href="#searchbox" class="showall">&laquo; Start 
Over</a></p>
                </div>
-- and five more just like the one above -
                <div>
        </div>