[jQuery] beginner question on show/hide and reusing functions
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 & 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
& recreation</span></a></li>
</ul>
</div>
<div id="searchboxes">
<div id="musicsearch" class="searchpanel">
<h3>Search for Music</h3>
form goes here
<a href="#searchbox" class="showall">« Start Over</a>
</div>
-- and five more just like the one above -
<div>
</div>