Something like this?...
$(document).ready(function() {
var sp = $('.searchpanel').hide() //hide boxes initially
, so = $('#searchoptions')
, anim = false //prevents fast clicking of second option
;
// shows all
$('a.showall', sp).click(function() {
anim = true;
//hide the visible search box...
sp.filter(':visible').hide();
//show the options...
so.show('slow', function(){ anim = false; });
return false;
});
// show and hide
$('a', so).click(function() {
if(!anim){ //only act on the first option clicked...
anim = true;
//get the target from the clicked option's href...
var t = $('#'+this.href.split('#')[1]);
//hide the options...
so.hide('slow', function(){ //when options are hidden...
//...show the target searchbox...
t.show('slow', function(){ anim = false; });
});
}
return false;
});
});
On May 8, 1:52 am, illtron <[EMAIL PROTECTED]> wrote:
> 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>
> <p>form goes here</p>
> <p><a href="#searchbox" class="showall">« Start
> Over</a></p>
> </div>
> -- and five more just like the one above -
> <div>
> </div>
